@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

html, body, div, button, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, a, figure, input, textarea { margin: 0px; padding: 0px; border: 0; outline: none; }

input,textarea,button,select,option,optgroup { font-family: 'Inter', sans-serif; outline: none; transition: all .2s; }
select optgroup { font-style: normal; font-weight: 700 !important; }
select option { font-weight: 400 !important; }
select::-ms-expand { display: none; }
select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; background: url('//icon.ontbrand.com/regular/ccc/chevron-down.svg') no-repeat center right 20px; background-size: 16px; }
select:hover { background-image: url('//icon.ontbrand.com/regular/000/chevron-down.svg'); }
span.req { color: #f00; font-weight: 700; font-size: 13px; position: absolute; margin: -3px 0 0 3px; }

ul { list-style: none; }
a { text-decoration: none; color: var(--blue); transition: all .2s; }
html { overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; font-size: 0; font-weight: 400; line-height: 1.6; color: #111; }
body.modal-open section#configurator { transition: all .2s; filter: blur(2px); }
body.modal-open:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,255,255,.7); z-index: 3; }
body.loading:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('//icon.ontbrand.com/regular/1fbf8c/spinner-third.svg') no-repeat center; background-size: 40px; animation: rotate 1s infinite; z-index: 3; }
@keyframes rotate { 100% { transform: rotate(360deg); } }
body.loading section#configurator:before { content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #fff; position: absolute; z-index: 2; opacity: .8; }

div.modal { width: 300px; transition: all .2s; top: 280px; border: 1px solid var(--light-grey); opacity: 0; margin-top: 0; padding: 30px; background: #fff; position: absolute; z-index: 4; font-size: 17px; left: 50%; margin-left: -150px; box-shadow: var(--box-shadow); border-radius: 5px; }
div.modal.show { opacity: 1; margin-top: 10px; }
div.modal p { margin-bottom: 30px; }

a.save,
a.next { color: #fff; background: var(--light-blue); font-size: 15px; font-weight: 700; padding: 12px 32px; border-radius: 5px; box-shadow: var(--blue) 0px 2px 0px; }
a.next:hover { background: var(--blue); }
a.prev { transition: all .2s; color: #fff; background-color: #ff6961; font-size: 15px; padding: 12px 16px; border-radius: 5px; }
a.prev:hover { background-color: #ff4137; }
a.prev.hide { opacity: 0; }

section#configurator { padding: 30px; box-sizing: border-box; max-width: 1024px; box-sizing: border-box; margin: 0; position: relative; height: 768px; overflow: auto; }

section#configurator div.header { position: relative; margin-bottom: 50px; }
section#configurator div.header h1 { font-size: 30px; font-weight: 900; text-align: center; display: block; color: var(--blue); }
section#configurator div.header img { max-height: 60px; max-width: 260px; position: absolute; top: 0; display: none; }
section#configurator div.header a { position: absolute; right: 0; font-size: 16px; top: 10px; padding-left: 26px; background: url('//icon.ontbrand.com/solid/004998/phone-alt.svg') no-repeat left center; background-size: 18px; display: none; }

section#configurator div.steps { margin: 0 -30px 50px -30px;  }
section#configurator div.steps ul { display: flex; font-size: 17px; justify-content: space-between; text-align: center; list-style: none; position: relative; }
section#configurator div.steps ul:before { content: ""; left: 0; right: 0; border-top: 1px dashed var(--dark-grey); position: absolute; z-index: -1; margin-top: 19px; }
section#configurator div.steps li { width: calc(100%/3); }
section#configurator div.steps li a { display: inline-block; margin: 0; padding: 0 5px; text-decoration: none; color: var(--dark-grey); position: relative;  }
section#configurator div.steps li span.step { display: inline-block; width: 40px; height: 40px; border-radius: 20px; background: var(--light-grey); color: #fff; line-height: 40px; font-size: 15px; font-weight: 700; }
section#configurator div.steps li span.title { display: inline-block; font-weight: 700; display: block; margin-top: 10px;  }
section#configurator div.steps li a.active { color: var(--blue);  }
section#configurator div.steps li a.active span.step { background-color: var(--blue);  }
section#configurator div.steps li a.done { color: var(--green); }
section#configurator div.steps li a.done span.step { background: var(--green) url('//icon.ontbrand.com/regular/fff/check.svg') no-repeat center; background-size: 16px; text-indent: 100%; }
section#configurator div.steps li a.done span.title { font-weight: 400; }
section#configurator div.steps li a.active span.title { border-bottom: 1px solid var(--blue) }
section#configurator div.steps li a.active.done span.title { border-bottom: 1px solid var(--green) }

section#configurator div#content div.step { display: none; }
section#configurator div#content div.step.active { display: block; }
section#configurator div#content div.step div.success { font-size: 17px; text-align: center;  margin-bottom: 20px; padding: 20px; border-radius: 5px; border: 1px solid var(--green); background-color: var(--light-green) }

section#configurator div#content div.step ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
section#configurator div#content div.step ul#caravanbrands { display: none; }
section#configurator div#content div.step ul li { width: calc((100%/3) - 8px); margin: 6px 0; font-size: 15px; text-align: center; }
section#configurator div#content div.step ul li a { background: #fff; padding: 30px 0; border: 1px solid var(--light-grey); border-radius: 5px; display: block; z-index: 1; position: relative; }
section#configurator div#content div.step ul li a:hover { box-shadow: var(--box-shadow); border-color: var(--dark-grey); z-index: 0; position: relative; }
section#configurator div#content div.step ul li a.active { box-shadow: var(--box-shadow); border-color: var(--green); border-width: 2px; margin: -1px; font-weight: 700; z-index: 0; position: relative;  }

section#configurator div#content div.step#step_1 ul li { width: calc(50% - 8px); }
section#configurator div#content div.step#step_1 ul li a { padding: 50px 0; }

section#configurator div#content div.step#step_1 ul li a span.val { display: block; }
section#configurator div#content div.step#step_1 ul li a span.img { width: 70px; height: 70px; margin-bottom: 10px; display: inline-block; background-size: contain; background-position: center; opacity: .4; background-repeat: no-repeat; }
section#configurator div#content div.step#step_1 ul li a:hover span.img { opacity: .7; }
section#configurator div#content div.step#step_1 ul li a.active span.img { opacity: .7; }

section#configurator div#content div.step#step_2 ul li { width: calc((100%/5) - 8px); margin: 6px 0; }
section#configurator div#content div.step#step_2 ul li a { padding: 22px 0 14px 0; }
section#configurator div#content div.step#step_2 ul li a span.val { display: block; }
section#configurator div#content div.step#step_2 ul li a span.img { width: 50px; height: 50px; filter: grayscale(100%); margin-bottom: 10px; display: inline-block; background-size: contain; background-position: center; opacity: .4; background-repeat: no-repeat; }
section#configurator div#content div.step#step_2 ul li a:hover span.img { opacity: .7; }
section#configurator div#content div.step#step_2 ul li a.active span.img { opacity: .7; }

section#configurator div#content div.column { width: 50%; box-sizing: border-box; font-size: 17px; display: inline-block; vertical-align: top }
section#configurator div#content div.column:first-child { padding-right: 20px; }
form div.column { font-size: 0 !important; }
input,
textarea { border: 1px solid var(--light-grey); padding: 16px 24px; border-radius: 5px; font-size: 17px; width: 100%; box-sizing: border-box; margin-bottom: 20px; z-index: 1; position: relative; }
input.error,
textarea.error { border-color: var(--red); }
textarea:focus,
input:focus { box-shadow: var(--box-shadow); border-color: var(--dark-grey); z-index: 0; position: relative; }
input[type="file"] { display: none; }

input.small { width: 60%; box-sizing: border-box; }
input.smaller { width: 36%; margin-left: 4%; box-sizing: border-box; }

section#configurator div#content form div.photos { display: block; border-radius: 5px; cursor: pointer; border: 1px dashed var(--light-grey); padding: 16px 24px; text-align: center; margin-top: -3px; }
section#configurator div#content form div.photos div#gallery { display: flex; flex-wrap: wrap; }
section#configurator div#content form div.photos div#gallery span.image { margin: 5px; display: block; width: 120px; height: 94px; border: 1px solid #eee; border-radius: 3px; background-size: contain; background-repeat: no-repeat; background-position: center; }
section#configurator div#content form div.photos div#gallery span.image:first-child { margin-left: 0; }
section#configurator div#content form div.photos label { display: block; cursor: pointer; line-height: 40px; font-size: 15px; color: rgba(0,0,0,.6); }
section#configurator div#content form div.photos label:hover { color: #000; }
section#configurator div#content form textarea { height: 150px; }

section#configurator div.nav { display: flex; justify-content: space-between; position: absolute; bottom: 30px; width: calc(100% - 60px); }

table.overview { font-size: 16px; margin: 50px; border-collapse: collapse; }
table.overview th,
table.overview td { padding: 10px; border: 1px solid #eee; white-space: nowrap; width: 1%; vertical-align: top; }
table.overview th:nth-child(9),
table.overview td:nth-child(9) { width: 100%; white-space: normal; }

@media all and (max-width: 660px) {

	* { font-size: 14px; }
	input, textarea { font-size: 16px; }

	section#configurator div.header { margin-bottom: 30px; }

	section#configurator { height: auto; padding: 30px 30px 100px 30px }

	section#configurator div.steps { margin-bottom: 30px; }

	section#configurator div#content div#step_1.step ul { display: block; }
	section#configurator div#content div#step_1.step ul li { display: block; width: 100%; }

	section#configurator div#content div#step_2.step ul li a { padding: 0 !important; font-size: 0; }
	section#configurator div#content div#step_2.step ul li a span.val { font-size: 11px; padding: 0; margin-top: -5px; margin-bottom: 10px; }
	section#configurator div#content div#step_2.step ul li a span.img { background-size: 30px; margin: 0; }
	section#configurator div#content div.step#step_2 ul li { width: calc((100%/3) - 8px); margin: 6px 0; }

	section#configurator div#content div.column { margin: 0; width: 100%; padding: 0 !important; }

}