.container{display:flex;flex-direction:column;align-items:center;margin-top:1%;padding-bottom:100px}.container.hidden{display:none}.title{font-size:1.8em;margin-bottom:1em}.options{display:flex;flex-direction:row;justify-content:center;gap:2em}.option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em;border:2px solid #ccc;border-radius:5px;width:250px;height:250px;box-sizing:border-box;overflow:hidden;cursor:pointer;background-color:#d3d3d3}.option.selected{background-color:#3449bd1f;color:#fff}.option.selected h3{color:inherit}.option-image{width:80%;height:auto;object-fit:cover;margin-bottom:.5em}@media (max-width: 600px){.options{flex-direction:column;align-items:center}}.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#ffffffe6;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.button{display:inline-flex;align-items:center;justify-content:center;width:120px;padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}html,body{height:100%;margin:0;padding:0;background-image:url(https://empirefences.com/wp-content/uploads/2024/12/LoginPage.jpg);background-repeat:no-repeat;background-size:cover;background-position:center}#form-container{position:relative;width:100%;height:100%;z-index:1}vaadin-text-field::part(input-field){border:2px solid white}vaadin-text-field[focused]::part(input-field){border-color:maroon}vaadin-text-field::part(input-field){background-color:#fff;opacity:.7}vaadin-text-field::part(label){color:#fff;font-size:18px;margin-left:25px}.circular-button{border-radius:50%;color:#fff;background-color:#000;height:70px;font-size:18px;opacity:.7}.circular-button:hover{opacity:1}.centered-menu-bar{margin:0 auto;display:flex;justify-content:center}.centered-label label .centered-label{padding-left:55px;color:#000}.progress-bar-container{display:flex;flex-direction:column;align-items:center;position:relative;background-color:#4caf50}.progress-bar{width:100%;height:10px}vaadin-progress-bar::part(value){background-color:maroon}#steps{display:flex;justify-content:space-between;width:100%;margin-top:10px;position:relative;--total-steps: 4}.step{display:flex;flex-direction:column;align-items:center;text-align:center;position:absolute}.step:nth-child(1){left:0;transform:translate(-50%)}.step:nth-child(2){left:calc((1 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(3){left:calc((2 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(4){left:calc((3 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(5){left:calc((4 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(6){left:calc((5 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(7){left:calc((6 * (100% / var(--total-steps))));transform:translate(-50%)}.step:nth-child(8){left:calc((7 * (100% / var(--total-steps))));transform:translate(-50%)}.marker{width:40px;height:40px;font-size:24px;border-radius:50%;background-color:gray;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:5px}.label{width:200px;font-size:24px}.step.completed .marker{background-color:#4caf50}.step.selected .marker{background-color:maroon;color:#fff}