.steps-indicator { right: 0; bottom: 0; left: 0; margin: 0; padding: 20px 0 0 0; height: 30px; list-style: none; } .steps-indicator li { position: relative; float: left; margin: 0; padding: 0; padding-top: 10px; text-align: center; line-height: 15px; } .steps-indicator.steps-3 li { width: calc(100%/3); } .steps-indicator li.current, .steps-indicator li.editing { pointer-events: none; } .steps-indicator { height: 100px; position:relative; } .bookingContainer{ margin:0 auto; margin-top: 115px; display:inline-block; width:700px; position:relative; } .stepTitleContainer{ } .stepCircle{ height:20px; width:20px; margin:5px auto; border-radius:15px; } .activeStep{ background-color:rgb(9, 94, 13); } .stepLine{ position:absolute; top: 47%; left: 50%; right: -116px; z-index: -100; width: 100%; } .stepTitle{ text-align:center; font-size:15px; } .bookingTitle{ font-size:20px; text-align: center; text-transform: uppercase; margin-bottom:20px; } .bookingTable{ } .inner{ text-align: center; } .BookingStepContainer{ display:none; position:relative; min-height: 355px; margin-bottom: 50px; } #bookingStep1{ display:block; } .bookingButtonContainer{ position: absolute; bottom: 10px; left: 10px; right: 10px; height: 45px; } .bookingButtonContainer button{ position: absolute; padding: 15px; height: auto; background-color: lightgray; line-height: 15px; } .leftButton{ left:0; } .rightButton{ right:0; } .bookingSubmit{ position: absolute; padding: 15px!important; height: auto!important; line-height: 15px!important; -moz-appearance: auto; -webkit-appearance: auto; -ms-appearance: auto; appearance: auto; position: absolute; top: 0px; } .bookingButton{ position: absolute; padding: 15px!important; height: auto!important; line-height: 15px!important; } #datepicker{ width: 300px; } .availableTimesContainerTitle{ } .bookingResultsWrapper{ display:none; } #bookingStep3 p{ margin: 0 0 1em 0; } .availableTimes{ margin-bottom: 70px; } .availableBookingTime{ padding:10px; display:inline-block; margin-right:10px; margin-bottom:10px; cursor:pointer; width:60px; height:46px; } .availableBookingTime span{ pointer-events: none; } #servicelength{ -moz-appearance: auto; -webkit-appearance: auto; -ms-appearance: auto; appearance: auto; display:none; } .serviceTable{ display: table; width:90%; border-collapse: collapse; margin:10px auto; margin-bottom:100px; } .serviceHeader{ display: table-row; font-weight:bold; } .serviceRow{ display: table-row; } .serviceCol{ display: table-cell; vertical-align: middle; /*text-align: left;*/ text-align: center; } .serviceNameCol{ width:60%; text-align: left; vertical-align: middle; padding-left: 5px; } .servicePriceCol{ width:20%; text-align: right; } .serviceInfoCol{ width:5%; padding-left: 10px; } .serviceCheckCol{ width:5%; } .serviceInfoIcon{ width: 25px; height: 25px; position: relative; cursor: pointer; } .serviceInfoLabel{ position:absolute; top: 8px; right: 27px; width:150px; text-wrap: pretty; border:1px solid gray; border-radius:5px; background-color: white; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); visibility: hidden; cursor: pointer; font-size:10px; padding:5px; line-height: normal; } .serviceInfoIcon .fa-info-circle{ pointer-events: none; position:absolute; top:0; left:0; font-size:25px; cursor: pointer; z-index: -50; } .serviceInfoIcon:hover .serviceInfoLabel{ visibility: visible; } .serviceCheckCol input[type="checkbox"]{ width:20px; height:20px; display:block; opacity:1; margin-left:5px; -moz-appearance:auto; -webkit-appearance: auto; -ms-appearance: auto; appearance: auto; cursor:pointer; } .serviceCol h4{ margin-top:20px; margin-bottom:0; margin-left:5px; letter-spacing: normal; } .workerTable{ display: block; width: 430px; margin:10px auto; margin-bottom:100px; height:85px; } .profileRow{ display: block; height: 87px; cursor: pointer; } .profileRadioBtn{ width: 35px; height: 85px; } .profileCell{ display: inline-block; float:left; vertical-align: middle; text-align: left; } .profileImage{ width: 75px; height: 75px; margin-top: 5px; margin-left: 5px; border-radius: 45px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .profileImage img{ width:100%; } .profileRadioBtn input[type="radio"]{ -moz-appearance: auto; -webkit-appearance: auto; -ms-appearance: auto; appearance: auto; opacity: 1; margin:0 auto; line-height:85px; cursor:pointer; width: 20px; height: 20px; z-index: 100; position: relative; top: 30px; left: 6px; } .profileName{ padding-left: 10px; font-weight: bold; text-align: left; line-height: 85px; font-size: 18px; } .profileDescription{ padding-left: 10px; text-align: left; max-width: 300px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .bookingHeader{ text-align:center; margin:20px auto; } .totalPanelContainer{ position: fixed; top: 100px; right: 0; width: 440px; z-index: 300; } #totalPanel{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); width: 440px; display: none; z-index: 100; } #totalPanelBtnContainer{ position:absolute; right:0px; top:0px; bottom:0px; } #totalPanelBtn{ position: absolute; top: 0; right: 0; bottom: 0; width: 20px; cursor: pointer; min-height: 108px; display:none; } #totalPanelBtn i{ color:white; font-size:25px; position:absolute; left: 50%; top:50%; transform: translate(-50%, -50%); } .arrow-right { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #1d2726; position: absolute; top: 5px; right: -11px; z-index: 200; } .panel-heading{ font-size: 23px; margin-top: 20px; } .selectedServiceTable{ display: table; width: 100%; border-collapse: collapse; margin: 10px auto; margin-bottom: 45px; text-align: left; } .totalServiceRow{ display: table-row; } .totalSelectedServiceName{ padding-left: 10px; } .totalSelectedServicePrice{ display: table-cell; vertical-align: middle; text-align: left; } .selectedServiceCol{ } .serviceContent{ padding-right: 20px; } .totalPrice{ position: absolute; left: 0; bottom: 10px; font-size: 20px; font-weight: bold; text-align: center; text-align: right; width: 100%; padding-right: 30px; } .totalSelectedTime{ position: absolute; left: 0; bottom: 10px; font-size: 20px; font-weight: bold; text-align: center; text-align: Left; width: 100%; padding-left: 10px; } .totalPrice span{ margin:0 auto; } .totalSelectedServicePrice{ text-align: right; } .serviceTime{ display: none; } .totalTitle{ font-size: 15px; } .ui-datepicker-inline{ margin: 0 auto; } .bookingName, .bookingEmail, .bookingPhone{ height: 2.5em; max-width: 500px; margin: 0 auto; } .bookingEmailTitle, .bookingPhoneTitle{ margin-bottom:0; margin-top:15px; } .bookingThankYouTitle{ margin-top:150px; font-weight:bold; font-size:20px; color:#a5705b; text-transform:uppercase; } .bookingThankYouMessageTitle{ } .bookingCalendar{ float:left; margin-top: 10px; margin-left: 10px; } .bookingResultsWrapper{ float: left; width: 360px; margin-left: 10px; margin-top: 7px; } #bookingStep3{ min-height: 540px; } #serviceBookingDate{ font-size: 20px; text-align: center; padding: 10px; font-weight: 500; display:none; padding: 10px 0px 0px 0px; } #serviceBookingTime{ font-size: 20px; text-align: center; padding: 10px; font-weight: 500; display:none; padding: 10px 0px 0px 0px; } .serviceBookingprofileRowContainer{ } .serviceBookingprofileImage{ width: 60px; height: 60px; background-position: center center; background-repeat: no-repeat; background-size: cover; float: left; margin-right: 10px; background-color: white; border-radius: 45px; margin-top: 5px; margin-left: 5px; } .serviceBookingprofileName{ float: left; font-size: 20px; text-align: left; height: 60px; line-height: 65px; margin-top: 5px; } .serviceBookingWorkerContainer{ display:none; height:85px; } .selectedTime{ background-color:#a5705b; color:white; } #bookingStep4{ min-height:460px; } .g-recaptcha{ position: absolute; top: -95px; left: 50%; transform: translate(-50%, 0); } .prices-category h4{ margin-bottom:0px; font-size:1.28em; letter-spacing: normal; } .prices-category h4 > p{ margin-bottom:0px; font-size:0.8em!important; font-weight: normal; } .prices-category{ margin-bottom:0px; }