.ppfr-block{ font-size: 16px; margin: 30px 0; padding: 20px} @media screen and (min-width: 767px){ .ppfr-block{ padding: 30px}} .edit-post-visual-editor .ppfr-block{ -webkit-box-sizing: content-box; box-sizing: content-box} .ppfr-circle{ background-color: #eee; border-radius: 50%; position: relative; margin: 0 auto 30px; width: 80px; height: 80px} @media screen and (min-width: 767px){ .ppfr-circle{ margin: 0 0 0 30px}} .ppfr-circle *, .ppfr-circle *:before, .ppfr-circle *:after{ -webkit-box-sizing: content-box; box-sizing: content-box} .ppfr-circle .ppfr-circle__label{ display: block; position: absolute; top: 0; right: 0; width: 100%; line-height: 80px; text-align: center; z-index: 1} .ppfr-circle::after{ background-color: #fff; border-radius: 50%; content: ""; display: block; position: absolute; top: 8px; right: 8px; width: 64px; height: 64px} .ppfr-circle .ppfr-circle__slice{ clip: rect(0, 80px, 80px, 40px); position: absolute; width: 80px; height: 80px} .ppfr-circle .ppfr-circle__slice .ppfr-circle__slice__bar{ border: 8px solid #f9461c; border-radius: 50%; clip: rect(0, 40px, 80px, 0); position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 64px; height: 64px} .ppfr-circle.ppfr-circle--50 .ppfr-circle__slice{ clip: rect(auto, auto, auto, auto)} .ppfr-circle.ppfr-circle--50 .ppfr-circle__slice .ppfr-circle__slice__fill{ border: 8px solid #f9461c; border-radius: 50%; clip: rect(0, 40px, 80px, 0); position: absolute; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); width: 64px; height: 64px} .ppfr-dl-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0} .ppfr-dl-list .ppfr-dl-list__label, .ppfr-dl-list .ppfr-dl-list__value{ margin: 0; padding: 0} .ppfr-dl-list .ppfr-dl-list__label{ font-weight: normal} .ppfr-dl-list .ppfr-dl-list__value{ font-weight: bold; text-align: left} .ppfr-block-circle .ppfr-block__container__col:nth-of-type(2){ width: 100%} @media screen and (min-width: 767px){ .ppfr-block-circle .ppfr-block-circle__container{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex}} .ppfr-block-circle .ppfr-dl-list .ppfr-dl-list__label{ opacity: 0.6; width: 70%} .ppfr-block-circle .ppfr-dl-list .ppfr-dl-list__value{ width: 30%} .ppfr-block-bar .ppfr-progress{ background: #eee; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0 10px; width: 100%; height: 20px} .ppfr-block-bar .ppfr-progress .ppfr-progress__bar{ background: #f9461c; border-radius: 10px; position: relative} .ppfr-block-bar .ppfr-progress .ppfr-progress__bar .ppfr-progress__bar__status{ display: block; font-size: 14px; line-height: 20px; position: relative; top: -20px; text-align: left; white-space: nowrap} @media screen and (min-width: 767px){ .ppfr-block-bar .ppfr-dl-list{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: right}} .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label{ text-align: right} @media screen and (min-width: 767px){ .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label:nth-of-type(2){ -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; padding-left: 3px; text-align: left}} .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value{ text-align: left} @media screen and (min-width: 767px){ .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value:nth-of-type(1){ -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; padding-right: 3px; text-align: right}} .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label, .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value{ display: block; -ms-flex-preferred-size: 50%; flex-basis: 50%; font-weight: 500; width: auto} @media screen and (min-width: 767px){ .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label, .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value{ -ms-flex-preferred-size: auto; flex-basis: auto; margin: 0}} .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label:first-of-type, .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value:first-of-type{ color: #f9461c} .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__label:nth-of-type(3), .ppfr-block-bar .ppfr-dl-list .ppfr-dl-list__value:nth-of-type(3){ display: none} .entry-content> *> .ppfr-block-bar:first-child{ margin-top: 0} .ppfr-block-compact .ppfr-dl-list{ -webkit-box-align: center; -ms-flex-align: center; align-items: center} .ppfr-block-compact .ppfr-dl-list .ppfr-dl-list__label{ font-weight: 500} .ppfr-block-compact .ppfr-dl-list .ppfr-dl-list__label:nth-of-type(1){ -ms-flex-preferred-size: 100%; flex-basis: 100%} .ppfr-block-compact .ppfr-dl-list .ppfr-dl-list__label:nth-of-type(2){ color: #999; margin-right: 5px; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4} .ppfr-block-compact .ppfr-dl-list .ppfr-dl-list__value:nth-of-type(1){ color: #f9461c; font-size: 26px; font-weight: 500; margin-left: 20px} .ppfr-block-compact .ppfr-dl-list .ppfr-dl-list__value:nth-of-type(2){ font-weight: 500; color: #999}