.progressbar { display: table; width: 100%; }
.progressbar li.active { color: black; }
.progressbar li:first-child:after { opacity: 0; }
.progressbar li { list-style-type: none; width: 25%; float: left; font-size: 25px; position: relative; text-align: center; color: #7d7d7d; }
.progressbar li:before { width: 20px; height: 20px; content: ""; line-height: 30px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; }
.progressbar li.active + li:after { background-color: #87aa3c; }
.progressbar li:after { width: 100%; height: 2px; content: ""; position: absolute; background-color: #7d7d7d; top: 10px; left: -50%; z-index: -1; }
.progressbar span { top: -70px; position: relative; font-size: 20px; }
.progressbar li.active:before { border-color: #87aa3c; background-color: #87aa3c; }

.feeding-calculator { text-align: center; }
.feeding-calculator input { outline: none; border-color: transparent; border-bottom: 2px dotted; background-color: transparent; display: inline; font-size: 24px; width: auto; }

.feeding-calculator .next_step { background: #87aa3c; min-width: 180px; padding: 5px 0; border-radius: 3px; border: none; line-height: normal; margin: auto; float: none; display: table; }
.feeding-calculator span.error { font-size: 14px; color: red;  line-height: normal; }
.feeding-calculator select { padding-right: 30px; outline: none; border-color: transparent; border-bottom: 2px dotted; background-color: transparent; display: inline; font-size: 24px; width: auto; position: relative; margin-top: 10px; }

ul.progressbar__ { display: table; width: 100%; list-style: none; padding-top: 20px;     position: relative;  z-index: 2; pointer-events: none; }
ul.progressbar__ li { list-style-type: none; width: 33%; float: left; font-size: 25px; position: relative; text-align: center; color: #7d7d7d; }
.progressbar__ li:before { width: 20px; height: 20px; content: ""; line-height: 30px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; }
.progressbar__ li.active:before { border-color: #87aa3c; }
.progressbar__ li:after { width: 100%; height: 2px; content: ""; position: absolute; background-color: #7d7d7d; top: 10px; left: -50%; z-index: -1;     opacity: 0; }
.progressbar__ li:first-child:after { opacity: 0; }
.progressbar__ li p { font-size: 20px; }

.progressbar__ li span { font-size: 15px; color: #87aa3c; }
.progressbar__ li.active { color: black; }

.checkbox-wrap input[type="checkbox"] { display: none; }
.checkbox-wrap  label { background: white; cursor: pointer; border: 2px #7d7d7d solid; border-radius: 5px; padding: 5px 5px; margin: 5px 5px; font-family: "Alegreya Sans", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; text-transform: none; color: #333333; }
.checkbox-wrap { margin: 10px auto; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 840px; }
.checkbox-wrap input[type="checkbox"]:checked  + label { color: white; background: #87aa3c; border-color: #87aa3c; }

.step3-content { width: 100%;  max-width: 600px; margin: auto;}

.progressbar-slider-wrap { position: relative; }
.progressbar-slider-wrap .progressbar-slider { position: absolute; top: 30px; left: 5px; right: 0; width: 100%; max-width: 764px; margin: auto; height: 2px; background: #87aa3c; border: none !important; z-index: 1; }
.progressbar-slider-wrap .progressbar-slider .ui-state-default { width: 24px; height: 24px; content: ""; line-height: 30px; border: 2px solid #87aa3c; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: #87aa3c; top: -10px; }
.progressbar-slider-wrap .progressbar-slider .ui-widget-header { background: #7d7d7d; }
body.page-feeidng-calculator-staging:before { position: absolute; z-index: -1; opacity: 0.1; background-image: url(../../../files/AdobeStock_41831376_f8c4158d-9417-4336-ab88-4c3a43d4305f_2511.jpeg); background-repeat: no-repeat; background-size: cover; background-position: center center; content: ""; top: 0; left: 0; right: 0; width: 100%; height: 100%;    /* position: fixed; */ }
body.page-feeidng-calculator-staging { position: relative; }