#wpforms-welcome .challenge {
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
background: #444 url("../images/challenge/getting-started.png") center right no-repeat;
background-size: contain;
#wpforms-welcome .challenge .block {
#wpforms-welcome .challenge h1 {
#wpforms-welcome .challenge h6 {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
.wpforms-challenge.frozen {
.wpforms-challenge.wpforms-challenge-start {
.wpforms-challenge .wpforms-challenge-list-block {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 26px 20px 20px 20px;
transition-timing-function: ease;
.wpforms-challenge .wpforms-challenge-list-block .list-block-button {
background-size: 16px 16px;
background-position: center center;
background-repeat: no-repeat;
.wpforms-challenge .wpforms-challenge-list-block .list-block-button.toggle-list {
background-image: url(../images/challenge/chevron-circle-down-regular.svg);
.wpforms-challenge .wpforms-challenge-list-block .list-block-button.challenge-skip, .wpforms-challenge .wpforms-challenge-list-block .list-block-button.challenge-cancel {
background-image: url(../images/challenge/times-circle-regular.svg);
.wpforms-challenge .wpforms-challenge-list-block .list-block-button:hover {
.wpforms-challenge .wpforms-challenge-list-block.closed {
.wpforms-challenge .wpforms-challenge-list-block.closed .list-block-button.toggle-list {
transform: rotate(180deg);
.wpforms-challenge .wpforms-challenge-list-block.closed .wpforms-challenge-list {
.wpforms-challenge .wpforms-challenge-list-block.closed .wpforms-challenge-list li {
.wpforms-challenge .wpforms-challenge-list-block.closed .wpforms-challenge-list .wpforms-challenge-item-completed {
.wpforms-challenge .wpforms-challenge-list-block.closed .wpforms-challenge-list .wpforms-challenge-item-current {
.wpforms-challenge .wpforms-challenge-list-block.closed .wpforms-challenge-list .wpforms-challenge-item-current span:before {
.wpforms-challenge .wpforms-challenge-list-block.transition-back .wpforms-challenge-list li {
transition: opacity 0.1s 0.2s, height 0.3s, margin 0.3s;
.wpforms-challenge .wpforms-challenge-list-block.transition-back .wpforms-challenge-list li.wpforms-challenge-completed {
transition: opacity 0.1s, height 0.3s, margin 0.3s;
.wpforms-challenge .wpforms-challenge-list-block.transition-back .wpforms-challenge-list .wpforms-challenge-item-current span:before {
transition: opacity 0.1s 0.2s;
.wpforms-challenge .wpforms-challenge-list {
justify-content: flex-start;
.wpforms-challenge .wpforms-challenge-list li {
transition: opacity 0.1s, height 0.3s, margin 0.3s;
.wpforms-challenge .wpforms-challenge-list li span:before {
font-family: FontAwesome;
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-item-current {
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-item-current span:before {
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-item-completed {
text-decoration: line-through;
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-item-completed span:before {
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-completed {
transition: opacity 0.1s 0.3s, height 0.3s, margin 0.3s;
.wpforms-challenge .wpforms-challenge-list li.wpforms-challenge-completed span:before {
.wpforms-challenge .wpforms-challenge-list li .dashicons-yes {
.wpforms-challenge .wpforms-challenge-bar {
background-color: #dddddd;
.wpforms-challenge .wpforms-challenge-bar div {
background-image: url(../images/challenge/bar-bg.png);
background-size: auto 8px;
background-repeat: repeat-x;
animation: wpforms-challenge-bar-shift 1.5s linear infinite;
@keyframes wpforms-challenge-bar-shift {
background-position-x: 27px;
background-position-x: 0;
.wpforms-challenge.paused .wpforms-challenge-bar div, .wpforms-challenge.wpforms-challenge-completed .wpforms-challenge-bar div {
animation-play-state: paused;
.wpforms-challenge.wpforms-challenge-completed .wpforms-challenge-block-timer p {
.wpforms-challenge.wpforms-challenge-completed .wpforms-challenge-block-under-timer .wpforms-challenge-pause,
.wpforms-challenge.wpforms-challenge-completed .wpforms-challenge-block-under-timer .wpforms-challenge-resume {
display: none !important;
.wpforms-challenge.wpforms-challenge-completed .wpforms-challenge-block-under-timer .wpforms-challenge-end {
display: inline-block !important;
.wpforms-challenge .wpforms-challenge-cancel,
.wpforms-challenge .wpforms-challenge-skip {
.wpforms-challenge .wpforms-btn {
.wpforms-challenge .wpforms-btn-md {
.wpforms-challenge .wpforms-btn-orange {
background-color: #df7739;
.wpforms-challenge .wpforms-btn-orange:hover {
background-color: #d06e2d;
.wpforms-challenge .wpforms-btn-grey {
background-color: #555555;
.wpforms-challenge .wpforms-btn-grey:hover {
background-color: #777777;
.wpforms-challenge .wpforms-challenge-block-timer {
background-color: #222222;
.wpforms-challenge .wpforms-challenge-block-timer img {
.wpforms-challenge .wpforms-challenge-block-timer h3 {
.wpforms-challenge .wpforms-challenge-block-timer p {
.wpforms-challenge .wpforms-challenge-block-under-timer {
background-color: #2d2d2d;
@keyframes wpforms-challenge-dot-pulse {
box-shadow: 0 0 0 0 rgba(223, 119, 57, 0.6);
box-shadow: 0 0 0 10px rgba(223, 119, 57, 0);
span.wpforms-challenge-dot {
background-color: #df7739;
animation: wpforms-challenge-dot-pulse 1.5s infinite !important;
span.wpforms-challenge-dot.wpforms-challenge-dot-step1 {
margin-inline-start: 20px;
span.wpforms-challenge-dot.wpforms-challenge-dot-step2 {
span.wpforms-challenge-dot.wpforms-challenge-dot-step3 {
span.wpforms-challenge-dot.wpforms-challenge-dot-step3.wpforms-challenge-dot-completed {
span.wpforms-challenge-dot.wpforms-challenge-dot-step4 {
span.wpforms-challenge-dot.wpforms-challenge-dot-step5 {
span.wpforms-challenge-dot.wpforms-challenge-dot-next {
background-color: #3178a0;
box-shadow: 0 0 0 6px #eeeeee;
animation: none !important;
span.wpforms-challenge-dot.wpforms-challenge-dot-completed {
background-color: #ffffff;
animation: none !important;
span.wpforms-challenge-dot.wpforms-challenge-dot-completed.wpforms-challenge-dot-step1 {
span.wpforms-challenge-dot.wpforms-challenge-dot-completed:before {
background-color: #ffffff;
font-family: FontAwesome;
.wp-editor-tools span.wpforms-challenge-dot.wpforms-challenge-dot-step5 {
.wpforms-challenge-tooltips {
.wpforms-challenge-popup-container {
background-color: rgba(112, 128, 144, 0.6);
transition: all .25s ease-out;
.wpforms-challenge-popup {
transform: translate(-50%, -50%);
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
.wpforms-challenge-popup-congrats {
background: #ffffff url("../images/challenge/confetti.svg") repeat center;
.wpforms-challenge-popup-header {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.wpforms-challenge-popup-header-contact {
background: #eeeeee url("../images/challenge/popup-contact.png") no-repeat center;
background-size: auto 57%;
.wpforms-challenge-popup-footer {
.wpforms-challenge-popup-footer h3 {
.wpforms-challenge-popup-footer h3 img {
.wpforms-challenge-popup-footer p {
.wpforms-challenge-popup-footer a.wpforms-challenge-popup-btn {
margin-left: 0 !important;