body.mobile .progress-bar-mobile-wrap{height:68px}body.mobile .progress-bar-mobile-wrap .option-box .option-box-wrap .icon{position:relative;top:3px}body.desktop .wider-progressbar{max-width:1200px!important;margin:0 auto 24px!important;display:flex;justify-content:center}body.desktop .option-step-desktop .desktop-option-content-wrapper{position:absolute}body.desktop .option-step-desktop img{height:80px;width:200px;z-index:3}body.desktop .progress-bar-mobile-wrap{height:80px;margin:0 auto;padding:0!important;cursor:pointer}@media only screen and (min-width:970px)and (max-width:1245px){body.desktop .progress-bar-mobile-wrap{padding-left:16px!important;padding-right:16px!important}}body.desktop .progress-bar-mobile-wrap .option-box{--rc-point: 14px}body.desktop .progress-bar-mobile-wrap .option-box .diamond-preview-core-box-progress-bar,body.desktop .progress-bar-mobile-wrap .option-box .setting-preview-core-box-progress-bar{right:calc(5px + var(--rc-point))}body.desktop .progress-bar-mobile-wrap .option-box-wrap .not-active{padding:2px 4px 4px 38px!important}body.desktop .progress-bar-mobile-wrap .option-box-wrap .option .choose{font-size:14px;line-height:20px;letter-spacing:-.1px}body.desktop .progress-bar-mobile-wrap .option-box-wrap .option .option-item{font-size:16px;line-height:20px}body.desktop .progress-bar-mobile-wrap.option-3.not-active,body.desktop .progress-bar-mobile-wrap.option-2.not-active{padding:2px calc(4px + var(--rc-point)) 4px 22px!important}body.desktop .progress-bar-mobile-wrap .svg-wrapper{border:1px dashed #E1E6F0;border-radius:12px;width:56px;height:56px;position:relative;top:1px;display:flex;justify-content:center;align-items:center;background:#fff}body.desktop .progress-bar-mobile-wrap .svg-wrapper .q-img{border-radius:12px;width:55px!important;height:55px!important}body.desktop .progress-bar-mobile-wrap .svg-wrapper .paired-diamond-icons{display:flex}body.desktop .progress-bar-mobile-wrap .svg-wrapper .paired-diamond-icons .paired-diamond-icon{margin:0 2px;height:auto;width:16px}body.desktop .progress-bar-mobile-wrap .svg-wrapper .icon{width:40px;height:40px}body.desktop .progress-bar-mobile-wrap .svg-wrapper .shape-svg{width:35px;max-height:45px;position:relative;top:2px;-o-object-fit:contain;object-fit:contain}body.desktop .progress-bar-mobile-wrap .svg-wrapper .gemstone-step-photo{position:relative;display:block;width:48px;height:48px;border-radius:10px;overflow:hidden}body.desktop .progress-bar-mobile-wrap .svg-wrapper .setting-svg{width:45px;height:45px;cursor:pointer;position:relative;bottom:2px}body.desktop .progress-bar-mobile-wrap .svg-wrapper .earrings-svg{width:47px;height:47px;position:relative;top:3px}.progress-bar-mobile-wrap{width:100%;padding:12px 16px 12px 12px;display:flex;justify-content:space-between;background:#fff}.progress-bar-mobile-wrap .option-box{padding:2px calc(4px + var(--rc-point)) 4px 16px!important;background:#f9fafb;width:33.3333333333%;position:relative;--rc-point: 8px;--rc-border-width: 1px;--rc-border-color: #E1E6F0;clip-path:polygon(0 0,calc(100% - var(--rc-point)) 0,100% 50%,calc(100% - var(--rc-point)) 100%,0 100%)}.progress-bar-mobile-wrap .option-box.option-2,.progress-bar-mobile-wrap .option-box.option-3{clip-path:polygon(0 0,calc(100% - var(--rc-point)) 0,100% 50%,calc(100% - var(--rc-point)) 100%,0 100%,var(--rc-point) 50%)}.progress-bar-mobile-wrap .option-box.option-1,.progress-bar-mobile-wrap .option-box.option-2{width:calc(33.3333333333% + var(--rc-point));margin-right:calc(-1 * var(--rc-point))}.progress-bar-mobile-wrap .option-box{--rc-radius: 4px;--rc-outer-radius: 8px;--rc-corner: .1;--rc-corner-inner: .075}@supports (clip-path: shape(from 0 0,line to 0 0)){.progress-bar-mobile-wrap .option-box{--rc-edge-right: line to calc(100% - var(--rc-point) - var(--rc-radius)) 0, curve to calc(100% - var(--rc-point) + var(--rc-point) * var(--rc-corner)) calc(50% * var(--rc-corner)) with calc(100% - var(--rc-point)) 0, line to 100% 50%, line to calc(100% - var(--rc-point) + var(--rc-point) * var(--rc-corner)) calc(100% - 50% * var(--rc-corner)), curve to calc(100% - var(--rc-point) - var(--rc-radius)) 100% with calc(100% - var(--rc-point)) 100%;--rc-fill-right: line to calc(100% - var(--rc-point) - var(--rc-radius)) var(--rc-border-width), curve to calc(100% - var(--rc-border-width) - var(--rc-point) + var(--rc-point) * var(--rc-corner-inner)) calc(var(--rc-border-width) + (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2) with calc(100% - var(--rc-border-width) - var(--rc-point)) var(--rc-border-width), line to calc(100% - var(--rc-border-width)) 50%, line to calc(100% - var(--rc-border-width) - var(--rc-point) + var(--rc-point) * var(--rc-corner-inner)) calc(100% - var(--rc-border-width) - (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2), curve to calc(100% - var(--rc-point) - var(--rc-radius)) calc(100% - var(--rc-border-width)) with calc(100% - var(--rc-border-width) - var(--rc-point)) calc(100% - var(--rc-border-width));--rc-edge-left-top: from calc(var(--rc-radius) + var(--rc-point)) 50%, line to calc(var(--rc-radius) + var(--rc-point) * var(--rc-corner-inner)) calc(var(--rc-border-width) + (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2), curve to var(--rc-border-width) var(--rc-border-width) with var(--rc-radius) var(--rc-border-width), line to var(--rc-border-width) 0;--rc-edge-left-bottom: line to var(--rc-border-width) 100%, line to var(--rc-border-width) calc(100% - var(--rc-border-width)), curve to calc(var(--rc-radius) + var(--rc-point) * var(--rc-corner-inner)) calc(100% - var(--rc-border-width) - (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2) with var(--rc-radius) calc(100% - var(--rc-border-width));--rc-fill-left-top: from calc(var(--rc-radius) + var(--rc-point) + var(--rc-border-width)) 50%, line to calc(var(--rc-radius) + var(--rc-border-width) + var(--rc-point) * var(--rc-corner-inner)) calc(var(--rc-border-width) + (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2), curve to calc(2 * var(--rc-border-width)) var(--rc-border-width) with calc(var(--rc-radius) + var(--rc-border-width)) var(--rc-border-width);--rc-fill-left-bottom: line to calc(2 * var(--rc-border-width)) calc(100% - var(--rc-border-width)), curve to calc(var(--rc-radius) + var(--rc-border-width) + var(--rc-point) * var(--rc-corner-inner)) calc(100% - var(--rc-border-width) - (100% - 2 * var(--rc-border-width)) * var(--rc-corner-inner) / 2) with calc(var(--rc-radius) + var(--rc-border-width)) calc(100% - var(--rc-border-width))}.progress-bar-mobile-wrap .option-box:has(+.active){--rc-edge-right: line to calc(100% - var(--rc-point)) 0, line to 100% 50%, line to calc(100% - var(--rc-point)) 100%;--rc-fill-right: line to calc(100% - var(--rc-border-width) - var(--rc-point)) var(--rc-border-width), line to calc(100% - var(--rc-border-width)) 50%, line to calc(100% - var(--rc-border-width) - var(--rc-point)) calc(100% - var(--rc-border-width))}.progress-bar-mobile-wrap .option-box.active{--rc-edge-left-top: from calc(var(--rc-radius) + var(--rc-point)) 50%, line to var(--rc-radius) 0;--rc-edge-left-bottom: line to var(--rc-radius) 100%;--rc-fill-left-top: from calc(var(--rc-radius) + var(--rc-point) + var(--rc-border-width)) 50%, line to calc(var(--rc-radius) + var(--rc-border-width)) var(--rc-border-width);--rc-fill-left-bottom: line to calc(var(--rc-radius) + var(--rc-border-width)) calc(100% - var(--rc-border-width))}.progress-bar-mobile-wrap .option-box.option-1{clip-path:shape(from 0 var(--rc-outer-radius),curve to var(--rc-outer-radius) 0 with 0 0,var(--rc-edge-right),line to var(--rc-outer-radius) 100%,curve to 0 calc(100% - var(--rc-outer-radius)) with 0 100%,close);margin-right:calc(-1 * (var(--rc-point) + var(--rc-radius) + var(--rc-border-width)))}.progress-bar-mobile-wrap .option-box.option-1:after{inset:0;clip-path:shape(from var(--rc-border-width) var(--rc-outer-radius),curve to var(--rc-outer-radius) var(--rc-border-width) with var(--rc-border-width) var(--rc-border-width),var(--rc-fill-right),line to var(--rc-outer-radius) calc(100% - var(--rc-border-width)),curve to var(--rc-border-width) calc(100% - var(--rc-outer-radius)) with var(--rc-border-width) calc(100% - var(--rc-border-width)),close)}.progress-bar-mobile-wrap .option-box.option-2,.progress-bar-mobile-wrap .option-box.option-3{clip-path:shape(var(--rc-edge-left-top),var(--rc-edge-right),var(--rc-edge-left-bottom),close);border-left:var(--rc-radius) solid transparent}.progress-bar-mobile-wrap .option-box.option-2:before,.progress-bar-mobile-wrap .option-box.option-2:after,.progress-bar-mobile-wrap .option-box.option-3:before,.progress-bar-mobile-wrap .option-box.option-3:after{left:calc(-1 * var(--rc-radius))}.progress-bar-mobile-wrap .option-box.option-2:after,.progress-bar-mobile-wrap .option-box.option-3:after{inset:0;left:calc(-1 * var(--rc-radius));clip-path:shape(var(--rc-fill-left-top),var(--rc-fill-right),var(--rc-fill-left-bottom),close)}.progress-bar-mobile-wrap .option-box.option-2{width:calc(33.3333333333% + var(--rc-point) + var(--rc-radius) + var(--rc-border-width));margin-right:calc(-1 * (var(--rc-point) + var(--rc-radius) + var(--rc-border-width)))}.progress-bar-mobile-wrap .option-box.option-3{width:calc(33.3333333333% + var(--rc-radius) + var(--rc-border-width))}}.progress-bar-mobile-wrap .option-box{isolation:isolate}.progress-bar-mobile-wrap .option-box:before,.progress-bar-mobile-wrap .option-box:after{content:"";position:absolute;inset:0;z-index:-1;clip-path:inherit;pointer-events:none}.progress-bar-mobile-wrap .option-box:before{background:var(--rc-border-color)}.progress-bar-mobile-wrap .option-box:after{inset:var(--rc-border-width);background:inherit}.progress-bar-mobile-wrap .option-box.option-1{padding:2px calc(4px + var(--rc-point)) 4px 8px!important}.progress-bar-mobile-wrap .option-box.option-3.not-active,.progress-bar-mobile-wrap .option-box.option-2.not-active{padding:2px calc(4px + var(--rc-point)) 4px 22px!important}.progress-bar-mobile-wrap .option-box.active{padding:2px calc(4px + var(--rc-point)) 4px 16px;background:#fff;--rc-border-color: #1B2F42;z-index:1}.progress-bar-mobile-wrap .option-box.active.option-2{padding:2px calc(4px + var(--rc-point)) 4px 22px!important}.progress-bar-mobile-wrap .option-box .option-box-wrap{display:flex;justify-content:space-between;align-items:center}.progress-bar-mobile-wrap .option-box .option-box-wrap .option .choose{font-size:12px;line-height:20px;position:relative;top:2px}.progress-bar-mobile-wrap .option-box .option-box-wrap .option .option-item{color:#1b2f42;font-size:14px;font-style:normal;line-height:16px;position:relative;bottom:1px}.progress-bar-mobile-wrap .option-box .option-box-wrap .option .option-item.done{position:relative;top:3px}.progress-bar-mobile-wrap .option-box .option-box-wrap .icon{width:24px;height:24px}.desktop.body--dark .progress-bar-mobile-wrap .svg-wrapper{background:transparent!important;border:1px dashed #607075!important}.desktop.body--dark .progress-bar-mobile-wrap .option-box{--rc-border-color: rgba(226, 232, 240, .16)}.desktop.body--dark .progress-bar-mobile-wrap .option-box.dm-highlight{--rc-border-color: #ffffff;z-index:1}.desktop.body--dark .progress-bar-mobile-wrap .active{background:#2c2c2e!important;--rc-border-color: #ffffff}.mobile.body--dark .progress-bar-mobile-wrap{width:100%;padding:12px 16px 12px 12px;display:flex;justify-content:space-between;background:#18181b}.mobile.body--dark .progress-bar-mobile-wrap .option-box{padding:2px calc(4px + var(--rc-point)) 4px 16px!important;background:#4c4c4e;position:relative;--rc-border-color: rgba(225, 230, 240, .16)}.mobile.body--dark .progress-bar-mobile-wrap .option-box.option-1{padding:2px calc(4px + var(--rc-point)) 4px 8px!important}.mobile.body--dark .progress-bar-mobile-wrap .option-box.option-3.not-active,.mobile.body--dark .progress-bar-mobile-wrap .option-box.option-2.not-active{padding:2px calc(4px + var(--rc-point)) 4px 22px!important}.mobile.body--dark .progress-bar-mobile-wrap .option-box.active{padding:2px calc(4px + var(--rc-point)) 4px 16px;background:#4c4c4e;--rc-border-color: #ffffff}.mobile.body--dark .progress-bar-mobile-wrap .option-box.active.option-2{padding:2px calc(4px + var(--rc-point)) 4px 22px!important}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap{display:flex;justify-content:space-between;align-items:center}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .option .choose{font-size:12px;line-height:20px;position:relative;top:2px}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .option .option-item{color:#fff;font-size:14px;font-style:normal;line-height:16px;position:relative;bottom:1px}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .option .option-item.done{position:relative;top:3px}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .option .view{color:#fff;font-size:12px;line-height:20px;text-decoration:underline}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .icon{width:24px;height:24px}.progress-bar-mobile-wrap .option-box .option-box-wrap .flow-icon{background-color:#717b86}.progress-bar-mobile-wrap .option-box .option-box-wrap .flow-icon-done{background-color:#0e8345}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .fill-icon{fill:#fff}.mobile.body--dark .progress-bar-mobile-wrap .option-box .option-box-wrap .stroke-icon{stroke:#fff}