.eplus-progress-bar { background: #F5F5FF; } .eplus-progress-fill { overflow: visible !important; height: 100%; text-align: center; background-color: #007bff; } .eplus-progress-bar-1 { position: relative; height: 24px; overflow: visible; background: #F5F5FF; border-radius: 24px; margin-bottom: 30px; } .eplus-progress-bar-1 + .eplus-progress-bar-1 { margin-top: 55px; } .eplus-progress-bar-1 .eplus-progress-fill { position: initial; border-radius: 30px; } .eplus-progress-bar-1 .eplus-progress-fill > span { position: absolute; top: calc(100% + 8px); font-size: 16px; line-height: normal; font-weight: 500; } .eplus-progress-bar-1 .eplus-pb-label { left: 0; } .eplus-progress-bar-1 .eplus-pb-percent { right: 0; } .eplus-progress-bar-2 { position: relative; height: 100px; overflow: visible; background: #F5F5FF; border-radius: 10px; margin-top: 50px; } .eplus-progress-bar-2 + .eplus-progress-bar-2 { margin-top: 85px; } .eplus-progress-bar-2 .eplus-progress-fill { padding: 0; display: flex; justify-content: space-between; align-items: center; position: relative; border-radius: 10px; background-color: #3BEDCE; background-image: radial-gradient( circle farthest-corner at 7.1% 15.6%, #3BEDCE 0%, #8F6BD5 100.3% ); } .eplus-progress-bar-2 .eplus-progress-fill > span { position: absolute; line-height: normal; font-weight: 500; } .eplus-progress-bar-2 .eplus-pb-label { font-size: 32px; top: -56px; } .eplus-progress-bar-2 .eplus-pb-percent { font-size: 40px; right: 0; color: #fff; margin-right: 22px; } .eplus-progress-bar-3 { display: flex; justify-content: center; background: transparent; margin: 19px 0 60px; } .eplus-progress-bar-3 .eplus-pb-start-label { margin-right: 1%; } .eplus-progress-bar-3 .eplus-pb-end-label { margin-left: 1%; } .eplus-progress-bar-3 + .eplus-progress-bar-3 { margin-top: 125px; } .eplus-progress-bar-3 .eplus-pb-indicator { position: absolute; right: -12px; top: 50%; transform: translateY(-50%) skew(35deg); background: #fff; padding: 10px; min-width: 68px; } .eplus-progress-bar-3 .eplus-pb-indicator > img { position: relative; transform: skew(-35deg); max-width: 58px; vertical-align: middle; } .eplus-progress-bar-3 .eplus-progress-bar-inner { position: relative; height: 24px; overflow: visible; background: #F5F5FF; width: 88%; } .eplus-progress-bar-3 .eplus-progress-fill { position: relative; } .eplus-progress-bar-3 .eplus-progress-fill .eplus-pb-percent { position: absolute; top: calc(100% + 20px); right: -15px; font-size: 16px; line-height: normal; font-weight: 500; } .eplus-progress-bar-3 .eplus-pb-percent svg { position: relative; z-index: 999; } .eplus-progress-bar-4 { padding: 5px 0; background: #F5F5FF; border-radius: 50px; height: 45px; margin-bottom: 20px; } .eplus-progress-bar-4 .eplus-progress-fill { border-radius: 50px; text-align: left; margin-left: 5px; position: relative; padding: 5px 0; background: #EC4251; } .eplus-progress-bar-4 .eplus-progress-fill span.eplus-pb-label { color: #fff; font-weight: 500; text-align: center; padding-left: 10px; position: absolute; top: 50%; transform: translateY(-50%); } .eplus-progress-bar-4 .eplus-progress-fill span.eplus-pb-percent { position: absolute; right: 6px; background: #fff; width: 50px; height: 28px; line-height: 29px; text-align: center; border-radius: 12px; color: #EC4251; font-weight: 500; display: block; top: 3.5px; } .eplus-progress-bar-5 { background: #dcdce2; margin-bottom: 40px; } .eplus-progress-bar-5 .eplus-progress-fill { text-align: left; position: relative; height: 5px; } .eplus-progress-bar-5 .eplus-progress-fill > span { position: absolute; top: -35px; } .eplus-progress-bar-5 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 0; background: #049DFF; display: inline-block; padding: 3px 20px; line-height: 1; border-radius: 20px; color: #fff; top: -28px; } .eplus-progress-bar-5 .eplus-progress-fill > span.eplus-pb-label { font-weight: 500; } .eplus-progress-bar-5 .eplus-progress-fill > span.eplus-pb-percent:after { content: ""; border-top: 6px solid #dcdce2; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute;bottom: -6px; left: 66%; } .eplus-progress-bar-6 { position: relative; border-radius: 3px; margin-bottom: 25px; } .eplus-progress-bar-6 .eplus-progress-fill { text-align: left; background: #1ABC9C; border-radius: 3px; height: 27px; } .eplus-progress-bar-6 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 10px; top: 4px; } .eplus-progress-bar-6 .eplus-progress-fill > span.eplus-pb-label { background: #1B8672; display: inline-block; color: #fff; font-weight: 500; padding: 3.5px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; height: 100%; margin-top: 0px; } .eplus-progress-bar-7 { margin-bottom: 35px; } .eplus-progress-bar-7 .eplus-progress-fill { text-align: left; height: 4px; position: relative; background: #F22296; } .eplus-progress-bar-7 .eplus-progress-fill > span { position: absolute; top: 10px; } .eplus-progress-bar-7 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 0; } .eplus-progress-bar-7 .eplus-progress-fill:before { position: absolute; content: ""; right: 1px; top: 0; background: #fff; width: 4px; height: 4px; border-radius: 50%; z-index: 1; } .eplus-progress-bar-7 .eplus-progress-fill:after { position: absolute; right: -4px; top: -5px; width: 14px; height: 14px; background-color: inherit; content: ""; border-radius: 50%; } .eplus-progress-bar-8 { background: #262626; height: 25px; border-radius: 20px; padding: 5px; margin-bottom: 40px; } .eplus-progress-bar-8 .eplus-progress-fill { text-align: left; position: relative; background: #d9534f; border-radius: 20px; } .eplus-progress-bar-8 .eplus-progress-fill.active, .eplus-progress-bar-10 .eplus-progress-fill.active { animation: reverse progress-bar-stripes 0.80s linear infinite, animate-positive 4s; } .eplus-progress-fill.eplus-progress-bar-striped { background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .eplus-progress-bar-8 .eplus-progress-fill > span { position: absolute; top: -35px; } .eplus-progress-bar-8 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 0; top: -36px; background: #262626; color: #fff; display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 13px; } .eplus-progress-bar-8 .eplus-progress-fill > span.eplus-pb-percent:after { position: absolute; content: ""; border-top: 8px solid #262626; border-left: 8px solid transparent; border-right: 8px solid transparent; bottom: -7px; left: 12px; } .eplus-progress-bar-9 { height: 5px; margin-bottom: 45px; } .eplus-progress-bar-9 .eplus-progress-fill { text-align: left; position: relative; background: #d9534f; } .eplus-progress-bar-9 .eplus-progress-fill:before, .eplus-progress-bar-9 .eplus-progress-fill:after { outline: 4px solid #d9534f; } .eplus-progress-bar-9 .eplus-progress-fill:before, .eplus-progress-bar-9 .eplus-progress-fill:after { position: absolute; content: ""; width: 20px; height: 20px; background: #fff; right: 16px; top: -9px; transform: rotate(45deg); } .eplus-progress-bar-9 .eplus-progress-fill:after { background: #D9534F; } .eplus-progress-bar-9 .eplus-progress-fill:after { border: 4px solid #fff; position: absolute; right: 0; } .eplus-progress-bar-9 .eplus-progress-fill.active { animation: reverse progress-bar-stripes 0.80s linear infinite, animate-positive 4s; } .eplus-progress-bar-9 .eplus-progress-fill > span { position: absolute; top: -35px; } .eplus-progress-bar-9 .eplus-progress-fill > span.eplus-pb-label { position: relative; } .eplus-progress-bar-9 .eplus-progress-fill > span.eplus-pb-label:after { content: "\f068 "; font-family: fontawesome; font-size: 10px; position: absolute; top: 50%; transform: translateY(-50%); right: -11px; color: #3a3a3a; } .eplus-progress-bar-9 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; left: 115px; top: -37px; display: inline-block; padding: 2px 7px; border-radius: 4px; } .eplus-progress-bar-10 .eplus-progress-fill { text-align: left; height: 30px; position: relative; border-radius: 0 20px 0 20px; } .eplus-progress-bar-10 .eplus-progress-fill span { position: absolute; bottom: 30px; } .eplus-progress-bar-10 .eplus-progress-fill span.eplus-pb-percent { position: absolute; right: 0; top: 0; } .eplus-progress-bar-10 { border-radius: 0 20px 0 20px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%) inset; margin-bottom: 30px; } .eplus-progress-bar-10 .eplus-progress-fill span.eplus-pb-percent { position: absolute; right: 3px; top: 2px; width: 50px; height: 93%; background: #000000; color: #fff; border-top-right-radius: 20px; text-align: center; } .eplus-progress-bar-11 { height: 13px; padding: 5px; margin-bottom: 45px; } .eplus-progress-bar-11 .eplus-progress-fill { text-align: left; position: relative; background: #F22296; } .eplus-progress-bar-11 .eplus-progress-fill:after { content: ""; position: absolute; right: -6px; width: 0; height: 0; border: 0 solid transparent; border-bottom-width: 6px; border-top-width: 6px; border-left: 6px solid #F22296; top: -4px; } .eplus-progress-bar-11 .eplus-progress-fill > span { position: absolute; bottom: 10px; } .eplus-progress-bar-11 .eplus-progress-fill > span.eplus-pb-label { position: absolute; left: -6px; font-weight: 500; color: #29102b; } .eplus-progress-bar-11 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: -40px; bottom: 19px; background: #29102b; display: inline-block; color: #fff; padding: 6px 7px; border-radius: 4px; line-height: 1; } .eplus-progress-bar-11 .eplus-progress-fill > span.eplus-pb-percent:after { position: absolute; content: ""; border: 5px solid transparent; border-top: 5px solid #29102b; border-left: 5px solid #29102b; bottom: -7px; left: 0; } .eplus-progress-bar-12 { border-radius: 30px; margin-bottom: 35px; } .eplus-progress-bar-12 .eplus-progress-fill { text-align: left; position: relative; height: 20px; border-radius: 30px; background: #F22297 } .eplus-progress-bar-12 .eplus-progress-fill:after { content: ""; position: absolute; width: 100%; height: 50%; left: 0; bottom: 0; background: rgba(0,0,0,0.3); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } .eplus-progress-bar-12 .eplus-progress-fill > span { position: absolute; top: 25px; } .eplus-progress-bar-12 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 0; } .eplus-progress-bar-13 { height: 20px; border-width: 8px 0; border-style: solid none; border-color: #292828; border-radius: 30px; position: relative; margin-bottom: 35px; } .eplus-progress-bar-13 .eplus-progress-fill { text-align: left; position: relative; background: #f13a11; } .eplus-progress-bar-13 .eplus-progress-fill:after { position: absolute; content: ""; width: 30px; height: 30px; background: #F5F5FF; border-radius: 50%; right: 0; top: -14px; border: 2px solid #292828; } .eplus-progress-bar-13 .eplus-progress-fill > span { position: absolute; top: -35px; } .eplus-progress-bar-13 .eplus-progress-fill > span.eplus-pb-percent { position: absolute; right: 0; top: -40px; }