.step-to-distance{padding:40px 0}.step-to-distance .panel{width:100%;margin-top:64px;border:1px solid #dfdfdf;border-radius:14px;position:relative;background-color:#fff}.step-to-distance .panel .s2d{width:640px;height:64px;position:absolute;top:-32px;left:50%;transform:translate(-50%);background-color:#f2f3f7;border:1px solid #dfdfdf;border-radius:32px;display:flex;align-items:center;overflow:hidden}.step-to-distance .panel .s2d span{flex:1;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:18px;font-weight:600;line-height:22px;text-align:center;height:100%}.step-to-distance .panel .s2d span.active{background-color:#2b3543;color:#fff}.step-to-distance .panel .s2d span:hover{text-decoration:underline}.step-to-distance .panel .actions{padding:72px 80px 0;border-bottom-left-radius:14px;border-bottom-right-radius:14px}.step-to-distance .panel .actions .action{display:flex;flex-direction:row;gap:40px}.step-to-distance .panel .actions .action>span{font-size:18px;font-weight:700;line-height:22px}.step-to-distance .panel .actions .action .total>span,.step-to-distance .panel .actions .action .height>span{font-size:18px;font-weight:700;line-height:22px;display:block;margin-bottom:16px}.step-to-distance .panel .actions .action .total .input-wrapper,.step-to-distance .panel .actions .action .height .input-wrapper{width:400px}.step-to-distance .panel .actions .action .total .input-wrapper .input+.input-suffix,.step-to-distance .panel .actions .action .height .input-wrapper .input+.input-suffix{top:13px;transform:none}.step-to-distance .panel .actions .action .total .ft-in .change .dropdown,.step-to-distance .panel .actions .action .height .ft-in .change .dropdown{display:none}.step-to-distance .panel .actions .action .total .ft-in .input-wrapper,.step-to-distance .panel .actions .action .height .ft-in .input-wrapper{width:unset}.step-to-distance .panel .actions .action .total .ft-in .input-wrapper:nth-child(2) .input,.step-to-distance .panel .actions .action .height .ft-in .input-wrapper:nth-child(2) .input{border-top-right-radius:8px;border-bottom-right-radius:8px}.step-to-distance .panel .actions .action .total .ft-in .input-wrapper:nth-child(2) .input+.input-suffix,.step-to-distance .panel .actions .action .height .ft-in .input-wrapper:nth-child(2) .input+.input-suffix{border-right:none}.step-to-distance .panel .actions .action .dropdown{display:none}.step-to-distance .panel .actions .action+.action{margin-top:40px}.step-to-distance .panel .actions .action.isMetric{padding-left:36px;gap:112px}.step-to-distance .panel .actions .action.isMetric span{font-size:18px;font-weight:500;display:flex;line-height:22px;cursor:pointer;position:relative}.step-to-distance .panel .actions .action.isMetric span:before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background-color:#fff;border:2px solid #b2b2b2;left:-38px;top:50%;transform:translateY(-50%)}.step-to-distance .panel .actions .action.isMetric span:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background-color:#fff;left:-32px;top:50%;transform:translateY(-50%)}.step-to-distance .panel .actions .action.isMetric span:hover{text-decoration:underline}.step-to-distance .panel .actions .action.isMetric span:hover:after{background-color:#328fde;opacity:.5}.step-to-distance .panel .actions .action.isMetric span.active:after{background-color:#328fde;opacity:1}.step-to-distance .panel .actions .action.paces{flex-direction:column;gap:16px}.step-to-distance .panel .actions .action.paces .options{display:flex;flex-direction:row;justify-content:space-around}.step-to-distance .panel .actions .action.paces .options .option{width:128px;height:82px;border-radius:8px;border:1px solid #b2b2b2;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:16px;font-weight:400;line-height:20px;color:gray}.step-to-distance .panel .actions .action.paces .options .option p{font-size:18px;font-weight:600;line-height:22px;color:#565656}.step-to-distance .panel .actions .action.paces .options .option.active{border:1px solid #328fde;color:#328fde}.step-to-distance .panel .actions .action.paces .options .option.active p{color:#328fde}.step-to-distance .panel .actions .action.paces .options .option:hover{border:1px solid #328fde;color:#328fde}.step-to-distance .panel .actions .action.paces .options .option:hover p{color:#328fde;text-decoration:underline}.step-to-distance .panel .actions .btn{width:420px;display:flex;align-items:center;justify-content:center;margin:32px auto -24px;position:relative;font-size:18px;height:48px;font-weight:600;line-height:22px;text-align:center;border-radius:8px}.step-to-distance .panel .actions .btn:hover{background-color:#1e79c2}.step-to-distance .panel .result{border-top:1px solid #dfdfdf;display:flex;flex-direction:row;justify-content:space-between;background-color:#f2f3f7;align-items:center;padding:44px 80px;border-bottom-left-radius:14px;border-bottom-right-radius:14px}.step-to-distance .panel .result span{font-size:24px;font-weight:500;line-height:28px}.step-to-distance .panel .result div{font-size:24px;font-weight:500;line-height:28px;display:flex;gap:16px;align-items:center}.step-to-distance .panel .result div b{font-size:60px;font-weight:700;line-height:74px;display:inline-block;margin-right:8px}.step-to-distance .panel .result div img{width:48px;height:48px}.step-to-distance .walking-calculator{padding:40px 0 0}.step-to-distance .walking-calculator h2{width:100%;margin-left:0;font-size:24px;font-weight:700;line-height:28px;text-align:left}.step-to-distance .walking-calculator .calculators{width:100%;margin-left:0;margin-top:24px;gap:25px}.step-to-distance .walking-calculator .calculators .calculator{width:180px;height:204px;border:1px solid #dfdfdf;background-color:#fff;flex-direction:column;align-items:center;justify-content:start;padding:32px 16px 0}.step-to-distance .walking-calculator .calculators .calculator img{width:64px;height:64px}.step-to-distance .walking-calculator .calculators .calculator span{text-align:center}@media screen and (max-width: 1000px){.step-to-distance{background-color:#fff;padding:24px 16px}.step-to-distance .panel{display:flex;flex-direction:column}.step-to-distance .panel .s2d{width:calc(100% - 48px)}.step-to-distance .panel .s2d span{font-size:15px;padding:10px;font-weight:600;line-height:20px}.step-to-distance .panel .actions{border-bottom-right-radius:14px;border-bottom-left-radius:0;padding:64px 24px 0}.step-to-distance .panel .actions .action{gap:8px}.step-to-distance .panel .actions .action>span{font-size:17px;font-weight:700;line-height:22px}.step-to-distance .panel .actions .action+.action{margin-top:16px}.step-to-distance .panel .actions .action.isMetric span{font-size:17px;font-weight:500;line-height:22px}.step-to-distance .panel .actions .action.isMetric+.action{flex-direction:column;margin-top:32px;gap:16px}.step-to-distance .panel .actions .action.isMetric+.action .input-wrapper{width:unset}.step-to-distance .panel .actions .action .dropdown{display:block}.step-to-distance .panel .actions .action .total .ft-in .change,.step-to-distance .panel .actions .action .height .ft-in .change{margin-top:8px}.step-to-distance .panel .actions .action .total span,.step-to-distance .panel .actions .action .height span{margin-bottom:8px;font-size:17px;line-height:22px}.step-to-distance .panel .actions .action.paces{gap:8px}.step-to-distance .panel .actions .btn{width:100%;height:48px;font-size:17px;font-weight:600;line-height:22px}.step-to-distance .panel .result{padding:64px 40px 40px;flex-direction:column}.step-to-distance .panel .result>span{font-size:17px;font-weight:400;line-height:22px;text-align:center;display:block;margin-top:16px}.step-to-distance .panel .result div{font-size:18px;font-weight:500;line-height:22px;gap:8px;padding-bottom:14px;width:100%;align-items:center;justify-content:center;border-bottom:1px solid #dfdfdf}.step-to-distance .panel .result div b{font-size:48px;font-weight:700;line-height:58.09px;margin-right:4px}.step-to-distance .walking-calculator{padding:40px 0}.step-to-distance .walking-calculator .content{padding:0;width:100%}.step-to-distance .walking-calculator h2{text-align:center;font-size:24px;font-weight:700;line-height:28px}.step-to-distance .walking-calculator .calculators{display:flex;gap:16px;flex-direction:column}.step-to-distance .walking-calculator .calculators .calculator{width:100%;height:80px;border-radius:14px;background-color:#f5f5f5;flex-direction:row;gap:16px;padding:16px}.step-to-distance .walking-calculator .calculators .calculator img{width:48px;height:48px}.step-to-distance .walking-calculator .calculators .calculator span{text-align:start}}