.breadcrumbs { display: none; }

.valuationLayout { display: inline-block; width: 100%; padding: 50px 0; background-color: #f1f1f1; border-bottom: 1px solid #fff; }

.valuationLayout .valuationBanner { display: flex; align-items: center; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 65px 0 60px; margin-bottom: 50px; }
.valuationLayout .valuationBanner .container { max-width: 1126px; }
.valuationLayout .valuationBanner .element-textwrap { max-width: 440px; padding-left: 1px; }
.valuationLayout .valuationBanner .element-tagline { font-weight: 500; color: #ffffff; opacity: 1.0; font-size: 17px; margin-bottom: 14px; margin-top: 4px; }
.valuationLayout .valuationBanner .element-heading { font-weight: 600; color: #ffffff; opacity: 1.0; font-size: 28px; margin-bottom: 21px; max-width: 380px; line-height: 1.15; }
.valuationLayout .valuationBanner .element-heading span { color: var(--secondary-theme-color); }
.valuationLayout .valuationBanner .form-group { margin-bottom: 10px; }
.valuationLayout .valuationBanner input,
.valuationLayout .valuationBanner select { border: none;  width: 100%; font-size: 16px; height: 61px; padding: 10px 25px; }
.valuationLayout .valuationBanner select { font-weight: 600; }
.valuationLayout .valuationBanner input.text-uppercase::placeholder { text-transform: initial; }
.valuationLayout .valuationBanner .button { margin-top: 12px; /*background: #01b975;*/ font-size: 18px; font-weight: 700; width: 100%; height: 63px; max-width: initial; margin-bottom: 3px; border-radius: 0px; }

.valuationLayout .valuationBanner .marketing { margin: 0; list-style: none; margin-left: 29px; }
.valuationLayout .valuationBanner .marketing li { display: flex; align-items: center; color: #fff; margin-bottom: 22px; }
.valuationLayout .valuationBanner .marketing img { width: 34px; margin-right: 19px; }
.valuationLayout .valuationBanner .marketing strong { font-size: 24px; font-weight: 700; }

.valuation-step-header .h2 { position: relative; margin-bottom: 0; }
.valuation-step-header .back-link { position: absolute; top: 9px; right: 0; }
.valuation-step-header:after { content: ""; clear: both; display: block; }
 
.valuationLayout .panel { background: #ffffff; position: relative; max-width: 100%;  padding: 40px; padding-bottom: 25px; width: 700px; margin: auto; border: none; }
.valuationLayout .panel-heading { text-align: center; padding: 0; border: none; justify-content: center; font-size: 1.6em; font-weight: 700; text-transform: initial; line-height: inherit; min-height: initial; }
.valuationLayout .panel-heading ul { text-align: center; display: flex; align-items: flex-start; justify-content: center; margin: 0px; width: 100%; }
.valuationLayout .panel-heading ul li { list-style: none; position: relative; margin-bottom: 0px; margin-right: 10px; width: 330px; max-width: 100%; }
.valuationLayout .panel-heading ul li:last-child { margin-right: 0; }
.valuationLayout .panel-heading ul li:before { left: 0; right: 0; background: #d9d9d9; width: 100%; height: 5px;  content: ""; position: absolute; bottom: -10px; z-index: 0; }
.valuationLayout .panel-heading ul li.current:before { background: #85bdc7; }

.valuationLayout .panel-heading a { display: flex; flex-direction: column; }
.valuationLayout .panel-heading a:not([href]) { cursor: default; }
.valuationLayout .panel-heading span { height: 55px; width: 55px; text-align: center; margin: auto; background: transparent; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 50%; font-size: 30px; font-weight: 600; color: #d9d9d9; border: 2px solid #d9d9d9; }
.valuationLayout .panel-heading strong { color: #d9d9d9; font-size: 14px; font-weight: 400; margin-bottom: 3px; display: block; text-align: center; line-height: normal; }
.valuationLayout .panel-heading i { position: absolute; top: 0; right: -20px; bottom: 0; margin: auto; display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #ffffff; border-radius: 0px; color: #b3b3b3; border: 1px solid #b3b3b3; font-size: 13px; }

.valuationLayout .panel-heading .current span { background: #85bdc7; border: 2px solid #85bdc7; color: #fff; opacity: 1; }
.valuationLayout .panel-heading .current strong { opacity: 1; color: #000; font-weight: 600; }
.valuationLayout .panel-heading .current i { background: var(--theme-color); color: #fff; border-color: var(--theme-color); }
 
.valuationLayout .panel-heading .visited span { }
.valuationLayout .panel-heading .visited strong { opacity: 1; color: #000; font-weight: 600; }
.valuationLayout .panel-heading .visited span { background: #85bdc7; border: 2px solid #85bdc7; color: #fff; opacity: 1; }
.valuationLayout .panel-heading ul li.visited:before { background: #85bdc7; }

.valuationLayout .panel-body { padding: 0; }
.valuationLayout .panel-body .form-group { }
.valuationLayout h3 { font-size: 1.73em; font-weight: 700; text-transform: capitalize; margin-bottom: 15px; }
.valuationLayout h3 + p { margin-bottom: 20px; }
.valuationLayout .ucText .element-description { color: var(--font-color-rgb); }

.label-form { position: relative; }
.label-form label { color: #6f6c6c; font-size: 0.85em; width: 100%; }
.label-form label.bottom { left: auto; top: auto; bottom: -7px; right: 13px; }
.label-form input,
.label-form select {  height: auto; min-height: 45px; border-color: #e9e9e9; }
.label-form select { padding-left: 20px; height: 45px; }

.valuationLayout .regPlate { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.valuationLayout .regPlate input { text-transform: uppercase; padding: 18px;  text-align: center; background-image: url(../images/gb-reg.png); background-position: 2px center; background-repeat: no-repeat; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.valuationLayout .condition { }

.valuationLayout .button { border-radius: 0px; /*background: var(--secondary-theme-color);*/ }

.vehicle-condition-box { text-align: center; font-weight: 700; }
.vehicle-condition-box i { font-size: 35px; margin-bottom: 0.2em; }
.vehicle-condition-box.success { border-color: var(--success-color); }
.vehicle-condition-box.success i { color: var(--success-color); }
.vehicle-condition-box.error { border-color: var(--danger-color); }
.vehicle-condition-box.error i { color: var(--danger-color); }

.vehicle-condition { background: #e5e5e5;  text-align: left; margin-bottom: 1rem; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.vehicle-condition a { color: inherit; }
.vehicle-condition.cond-good { background: #c1d943; color: #fff; }
.vehicle-condition.cond-avg { background: #f5d56c; color: #fff; }
.vehicle-condition.cond-below { background: #e76f53; color: #fff; }

/*11 march*/

.progress-Container { display: flex; align-items: center; margin: 1.1rem 0 1.5rem; }
.progress-Container .progress { display: inline-flex; height: 25px; overflow: hidden; font-size: 0; border-radius: 0px; position: relative; width: 100%; border: 2px solid var(--secondary-theme-color); padding: 2px; }
.progress-Container .progress-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; text-align: center; background-color: var(--secondary-theme-color); transition: width .6s ease; border-radius: 0px; }
.progress-Container .completeValue { display: inline-flex; font-size: 12px; white-space: nowrap; margin-left: 10px; color: #fff; }
.progress-Container .completeValue strong { margin-right: 5px; }

.vue-range-slider.slider-component .slider { }
.vue-range-slider.slider-component .slider .slider-dot { border: 1px solid var(--secondary-theme-color); width: 20px !important; box-shadow: none !important; /*top: -5px !important;*/ }
.newRangeSlider div > p { font-weight: 600; color: var(--secondary-theme-color); font-size: 1rem; }

.newRangeSlider { min-height: 55px; }
.vue-range-slider.slider-component.slider-horizontal .slider-process{ background-color: var(--secondary-theme-color) !important;}
.conditionTab .tabs { display: flex; justify-content: space-between; padding: 0; list-style: none; margin: 0; position: relative; padding-top: 0px; margin-top: -50px; cursor: pointer; border: none; flex-wrap: initial; }
.conditionTab .tabs:after { content: ""; width: calc(100% - 20px); position: absolute; top: 5px; margin: 0; left: 5px; right: 0; background: #ccc; z-index: 0;  height: 10px; margin-left: 5px; }
.conditionTab .tabs li { margin: 0; cursor: pointer; position: relative; /*z-index: 1;*/ padding: 0; padding-top: 30px; min-width: initial; justify-content: center; font-size: 1em; font-weight: inherit; }
li.tab-link.resp-tab-item:nth-child(2) { margin-left: -39px; }
.conditionTab .tabs li:before { content: ""; width: 2px; height: 10px; position: absolute; top: 5px; margin: auto; margin-top: 0; left: 0; right: 0; z-index: 0; background: #000; opacity: 0; }
.conditionTab .tabs li:after { content: ""; width: 20px; height: 20px; position: absolute; top: 0px; margin: auto; margin-top: 0; left: 0; right: 0; background: #fff; z-index: 1; border-radius: 0px; border: 2px solid #36b3be; opacity: 0; transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
.conditionTab .tabs li.resp-tab-active { cursor: default; color: var(--secondary-theme-color); font-weight: 600; }
.conditionTab .tab-content { display: none !important; font-weight: 600; padding: 2rem 0px; }
.conditionTab .tab-content.resp-tab-content-active { display: block !important; }

.conditionTab .tab-content ul { list-style-position: unset; padding-left: 20px; }

.vehicle-info { text-align: center; }
.vehicle-info h2 { margin-bottom: 1.5rem; font-weight: 700; }
.vehicle-info ul { list-style: none; margin: 0; margin-bottom: 3rem; }
.vehicle-info li { display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; }
.vehicle-info label { width: 50%; text-align: right; padding: 0 20px; margin-bottom: 0; }
.vehicle-info strong { width: 50%; text-align: left; padding: 0 20px; font-weight: 700; }

.back-link { display: inline-block; position: relative; font-size: inherit; margin-top: 2rem; }
.back-link i { position: absolute; color: var(--secondary-theme-color); top: 0; left: 0; bottom: 0; margin: auto; z-index: 1; pointer-events: none; line-height: 0; display: inline-flex; align-items: center; font-size: 24px; }
.back-link .link-button { padding: 0; padding-left: 30px; height: auto; color: var(--secondary-theme-color); }

.newRangeSlider .vue-range-slider { padding-left: 0 !important; padding-right: 0 !important; z-index: 1 !important; }

.ul-checkbox { list-style: none; display: flex; justify-content: center; line-height: 1; margin: 20px 0; }
.ul-checkbox li { margin: 0px 25px; }

/* RESPONSIVE */

@media screen and (max-width:1199px) {
 .valuationLayout .panel { }
 .valuationLayout .panel-heading { }
 .valuationLayout .panel-body { }
 .valuation-step-header .h2 { display: flex; flex-direction: column-reverse; font-size: 1.5rem; }
}

@media screen and (max-width:767px) {
 .valuationLayout { padding: 20px 0; }
 .valuationLayout .panel { padding: 20px; }
 .vehicle-info li { justify-content: space-between; }
 .vehicle-info label { padding-left: 0; padding-right: 5px; width: auto; text-align: left; }
 .vehicle-info strong { padding-left: 5px; padding-right: 0; width: auto; text-align: right; }
 .conditionTab .tabs li { font-size: 0.8em; }
 .conditionTab .tabs li:first-child { margin-right: 15px; margin-left: -10px; }
 .conditionTab .tabs li:last-child { margin-right: -10px; }

 .valuationLayout .panel-heading { font-size: 1.3em; }
 .valuationLayout h3 { font-size: 1.45em; }

 .valuationLayout .popup { padding: 2rem; }

 .valuationLayout .valuationBanner .element-tagline { font-size: 16px; }
 .valuationLayout .valuationBanner .element-heading { font-size: 20px; }
 .valuationLayout .valuationBanner input,
 .valuationLayout .valuationBanner select { height: 41px; font-size: 14px; padding: 10px 15px; }
 .valuationLayout .valuationBanner .button { height: 45px; font-size: 16px; }

 .valuationLayout .valuationBanner .marketing { margin-top: 20px; margin-left: 10px; }
 .valuationLayout .valuationBanner .marketing li { margin-bottom: 15px; }
 .valuationLayout .valuationBanner .marketing img { width: 25px; }
 .valuationLayout .valuationBanner .marketing strong { font-size: 17px; }
}

@media screen and (max-width:555px) {
 .valuationLayout .panel-heading ul li { width: auto; min-width: 95px; }
 .valuationLayout input.button { width: auto; }
}

@media screen and (max-width:1023px) {
 .valuationLayout .panel-body { width: 100%; min-height: auto; }
}