#requestValuationForm .form-title { position: relative; font-size: 3rem; font-weight: 300; text-align: center; margin-bottom: 4rem; }

#requestValuationForm .form-title:after { content: ""; position: absolute; background-color: #dddddd; width: 30px; height: 3px; right: 0; bottom: -10px; left: 0; margin: 0 auto; }

#requestValuationForm .form-control { margin-bottom: 3rem; }

#requestValuationForm #valuation-control--wrapper { padding: 3rem 0 4rem 0; text-align: center; }

#requestValuationForm #valuation-control--wrapper .valuation-control { position: relative; cursor: pointer; }

#requestValuationForm #valuation-control--wrapper .valuation-control:first-of-type { margin-right: 3rem; }

#requestValuationForm #valuation-control--wrapper .valuation-control .badge { position: absolute; top: -5px; right: -10px; background-color: #db682c; transition: all 0.5s; border: 2px solid white; padding: 1rem; border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); opacity: 0; }

#requestValuationForm #valuation-control--wrapper .valuation-control .badge svg { width: 20px; height: 20px; fill: white; }

#requestValuationForm #valuation-control--wrapper .valuation-control svg { width: 150px; height: 150px; fill: grey; transition: all 0.5s; }

#requestValuationForm #valuation-control--wrapper .valuation-control input[type="radio"] { position: absolute; opacity: 0; }

#requestValuationForm #valuation-control--wrapper .valuation-control input[type="radio"]:checked ~ .badge { opacity: 1; }

#requestValuationForm #valuation-control--wrapper .valuation-control input[type="radio"]:checked ~ svg { fill: #292b2c; }

#requestValuationForm #property-control--wrapper { padding: 3rem 0 4rem 0; text-align: center; }

#requestValuationForm #property-control--wrapper .form-title { margin-bottom: 0; }

#requestValuationForm #property-control--wrapper .property-control { position: relative; padding: 1rem; cursor: pointer; }

#requestValuationForm #property-control--wrapper .property-control .badge { position: absolute; background-color: #dddddd; color: #292b2c; transition: all 0.5s; left: 50%; bottom: -5px; transform: translate(-50%, 0); font-size: 1.5rem; border: 2px solid white; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); }

#requestValuationForm #property-control--wrapper .property-control svg { fill: grey; margin-bottom: 1.5rem; transition: all 0.5s; }

#requestValuationForm #property-control--wrapper .property-control svg.icon--house__detached { width: 78px; }

#requestValuationForm #property-control--wrapper .property-control svg.icon--house__semi-detached { width: 136px; }

#requestValuationForm #property-control--wrapper .property-control svg.icon--house__terraced { width: 112px; }

#requestValuationForm #property-control--wrapper .property-control svg.icon--house__flat { width: 80px; }

#requestValuationForm #property-control--wrapper .property-control svg.icon--house__bungalow { width: 77px; }

#requestValuationForm #property-control--wrapper .property-control input[type="radio"] { position: absolute; opacity: 0; }

#requestValuationForm #property-control--wrapper .property-control input[type="radio"]:checked ~ .badge { background-color: #db682c; color: white; }

#requestValuationForm #property-control--wrapper .property-control input[type="radio"]:checked ~ svg { fill: #292b2c; }

#requestValuationForm #property-control--wrapper .property-control:hover .badge { background-color: #db682c; color: white; }

#requestValuationForm #bedrooms-control--wrapper { padding: 3rem 0 4rem 0; text-align: center; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control { position: relative; padding: 1rem 2rem 1rem 0; cursor: pointer; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control .badge { position: absolute; background-color: #dddddd; color: #292b2c; transition: all 0.5s; top: -3px; right: -3px; font-size: 2rem; border: 2px solid white; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control svg { width: 110px; fill: grey; transition: all 0.5s; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control input[type="radio"] { position: absolute; opacity: 0; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control input[type="radio"]:checked ~ .badge { background-color: #db682c; color: white; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control input[type="radio"]:checked ~ svg { fill: #292b2c; }

#requestValuationForm #bedrooms-control--wrapper .bedrooms-control:hover .badge { background-color: #db682c; color: white; }

#requestValuationForm #bathrooms-control--wrapper { padding: 3rem 0 4rem 0; text-align: center; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control { position: relative; padding: 1rem 2rem 1rem 0; cursor: pointer; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control .badge { position: absolute; background-color: #dddddd; color: #292b2c; transition: all 0.5s; top: -3px; right: -3px; font-size: 2rem; border: 2px solid white; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control svg { width: 110px; fill: grey; transition: all 0.5s; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control input[type="radio"] { position: absolute; opacity: 0; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control input[type="radio"]:checked ~ .badge { background-color: #db682c; color: white; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control input[type="radio"]:checked ~ svg { fill: #292b2c; }

#requestValuationForm #bathrooms-control--wrapper .bathrooms-control:hover .badge { background-color: #db682c; color: white; }

#requestValuationForm #media-section { padding: 3rem 0 4rem 0; }

#requestValuationForm #media-section .dropzone { background-color: whitesmoke; border: 1px solid #dddddd; border-radius: 4px; padding: 0; }

#requestValuationForm #media-section .dropzone #media-button { cursor: pointer; min-height: 200px; text-align: center; padding: 2rem 2rem 3rem 2rem; }

#requestValuationForm #media-section .dropzone #media-button svg { width: 200px; fill: grey; transition: all 0.5s; }

#requestValuationForm #media-section .dropzone #media-button:hover svg, #requestValuationForm #media-section .dropzone #media-button:active svg, #requestValuationForm #media-section .dropzone #media-button:focus svg { fill: #db682c; }

#requestValuationForm #media-section .dropzone .dz-preview { border: 1px solid #dddddd; border-radius: 4px; padding: 1rem; }

#requestValuationForm #media-section .dropzone .dz-preview .dz-image { border: 1px solid #dddddd; border-radius: 4px; }

#requestValuationForm #media-section .dropzone .dz-preview .dz-remove { background-color: #d9534f; color: white; text-transform: uppercase; font-size: 1rem; padding: 0.5rem; margin-top: 0.5rem; border-radius: 4px; transition: all 0.5s; }

#requestValuationForm #media-section .dropzone .dz-preview .dz-remove:hover, #requestValuationForm #media-section .dropzone .dz-preview .dz-remove:active, #requestValuationForm #media-section .dropzone .dz-preview .dz-remove:focus { background-color: #c9302c; text-decoration: none; }

#requestValuationForm #media-section .dropzone #media-previews { border-top: 1px solid #dddddd; }

#requestValuationForm #media-section .dropzone #media-previews:empty { display: none }

#requestValuationForm #media-section .dropzone #media-previews .dz-preview .dz-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

#requestValuationForm #details--wrapper textarea { height: 327px; }

#requestValuationForm #date-time--wrapper ul { height: 400px; overflow-y: scroll; border: 1px solid #dddddd; border-radius: 4px; margin-bottom: 4rem; list-style: none; padding-left: 0; }

#requestValuationForm #date-time--wrapper ul li { border-bottom: 1px solid #dddddd; }

#requestValuationForm #date-time--wrapper ul li label { position: relative; display: block; cursor: pointer; padding: 1rem; font-size: 1.5rem; font-weight: 300; }

#requestValuationForm #date-time--wrapper ul li label input { position: absolute; opacity: 0; }

#requestValuationForm #date-time--wrapper ul li label input:checked:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #dddddd; }

#requestValuationForm #date-time--wrapper ul li label input:checked ~ .badge { opacity: 1; }

#requestValuationForm #date-time--wrapper ul li label input:checked ~ svg { fill: #292b2c; }

#requestValuationForm #date-time--wrapper ul li label .badge { position: absolute; top: 0.6rem; right: 0.5rem; background-color: #db682c; transition: all 0.5s; border: 2px solid white; padding: 0.6rem; border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); opacity: 0; }

#requestValuationForm #date-time--wrapper ul li label .badge svg { width: 15px; height: 15px; fill: white; }

#requestValuationForm #date-time--wrapper ul li label strong { font-weight: bolder; }

#requestValuationForm #date-time--wrapper ul li.date-time--divider { background-color: whitesmoke; font-weight: 300; font-size: 2rem; text-align: center; padding: 1rem 0; border-bottom: 1px solid #dddddd; }

#requestValuationForm .gdpr-consent p:first-of-type { margin-bottom: 3rem; text-align: center; }

#requestValuationForm .gdpr-consent p:first-of-type strong { font-size: 3rem; font-weight: 300; }

#requestValuationForm #submit-btn { text-align: center; padding: 3rem 0 4rem 0; }
