.step-progress__wrapper{margin:0 auto;position:relative;width:90%}.step-progress__wrapper-before{background-color:gray;transform:translateY(-50%) perspective(1000px)}.step-progress__wrapper-after,.step-progress__wrapper-before{content:"";height:12px;left:0;position:absolute;top:50%;width:100%}.step-progress__wrapper-after{background-color:red;transform:scaleX(0) translateY(-50%) perspective(1000px);transform-origin:left center;transition:transform .5s ease}.step-progress__bar{align-items:center;display:flex;height:100px;justify-content:space-between;margin-bottom:40px;width:100%}.step-progress__step{--activeColor:red;--passiveColor:gray;--activeBorder:5px;--passiveBorder:5px;position:relative;z-index:2}.step-progress__step span{color:var(--passiveColor);display:block;font-size:50px;font-weight:900;opacity:1;text-align:center;transform:translateZ(0) scale(1) perspective(1000px);transition:.3s ease}@media (max-width:767px){.step-progress__step span{font-size:28px}}.step-progress__step--active .step-progress__step-label,.step-progress__step--active span{color:var(--activeColor)}.step-progress__step--active .step-progress__step-icon{opacity:1}.step-progress__step--valid .step-progress__step-icon{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) perspective(1000px)}.step-progress__step--valid span{color:var(--activeColor);opacity:0;transform:translateZ(0) scale(2) perspective(1000px)}.step-progress__step--valid .step-progress__step-label{color:var(--activeColor)}.step-progress__step:after{background-color:#fff;border:var(--passiveBorder) solid var(--passiveColor);border-radius:50%;content:"";height:75px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) perspective(1000px);transition:.3s ease;width:75px;z-index:-1}@media (max-width:767px){.step-progress__step:after{height:40px;width:40px}}.step-progress__step--active:after,.step-progress__step--valid:after{border:var(--activeBorder) solid var(--activeColor)}.step-progress__step--valid:after{background-color:var(--activeColor)}.step-progress__step-label{color:gray;font-size:18px;font-weight:600;left:50%;position:absolute;top:calc(100% + 25px);transform:translate(-50%) perspective(1000px);transition:.3s ease;white-space:nowrap}.step-progress__step-icon{color:#fff;font-size:36px;left:50%;opacity:0;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(0) perspective(1000px);transition:transform .3s ease}@media (max-width:767px){.step-progress__step-icon{font-size:22px}}.step-progress__bar{margin-bottom:0}.step-progress__bar .step-progress__step{font-size:1rem}.step-progress__ .step-progress__step{width:10px;border:none;border-radius:10%!important;text-align:center}.step-progress__ .step-progress__step span{font-size:.8rem}@media (min-width: 560px){.step-progress__ .step-progress__step span{font-size:1.3rem}}@media (min-width: 768px){.step-progress__ .step-progress__step span{font-size:1.8rem;margin-right:.25rem;width:100%;display:flex;align-self:center;align-items:center;justify-content:center}}.step-progress__ .step-progress__step:after{width:2rem;height:2rem}@media (min-width: 560px){.step-progress__ .step-progress__step:after{width:3rem;height:3rem}}@media (min-width: 768px){.step-progress__ .step-progress__step:after{width:4rem;height:4rem}}.step-progress__ .step-progress__step-label{display:none}@keyframes passing-through{0%{opacity:0;transform:translateY(40px)}30%,70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}@keyframes slide-in{0%{opacity:0;transform:translateY(40px)}30%{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:1px solid rgba(0,0,0,.8);border-radius:5px;padding:20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:3em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom,#eee,#ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{transition:opacity .2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:#000000e6;line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:#fffc}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:#fff6;padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{transform:scale(1.05);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{animation:passing-through 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;animation:slide-in 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px;background:#000c;border-radius:50%}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px;fill:#fff}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;transition:all .2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;transition:opacity .4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:20px;top:50%;margin-top:-10px;left:15%;right:15%;border:3px solid rgba(0,0,0,.8);background:#000c;border-radius:10px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#fff;display:block;position:relative;height:100%;width:0;transition:width .3s ease-in-out;border-radius:17px}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;transition:opacity .3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#b10606;padding:.5em 1em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:"";position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #b10606}.vue-dropzone{border:2px solid #e5e5e5;font-family:Arial,sans-serif;letter-spacing:.2px;color:#777;transition:background-color .2s linear}.vue-dropzone:hover{background-color:#f6f6f6}.vue-dropzone i{color:#ccc}.vue-dropzone .dz-preview .dz-image{border-radius:0}.vue-dropzone .dz-preview .dz-image:hover img{transform:none;-webkit-filter:none}.vue-dropzone .dz-preview .dz-details{bottom:0;top:0;color:#fff;background-color:#2196f3cc;transition:opacity .2s linear;text-align:left}.vue-dropzone .dz-preview .dz-details .dz-filename span,.vue-dropzone .dz-preview .dz-details .dz-size span{background-color:transparent}.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:none}.vue-dropzone .dz-preview .dz-details .dz-filename:hover span{background-color:transparent;border:none}.vue-dropzone .dz-preview .dz-progress .dz-upload{background:#ccc}.vue-dropzone .dz-preview .dz-remove{position:absolute;z-index:30;color:#fff;margin-left:15px;padding:10px;top:inherit;bottom:15px;border:2px white solid;text-decoration:none;text-transform:uppercase;font-size:.8rem;font-weight:800;letter-spacing:1.1px;opacity:0}.vue-dropzone .dz-preview:hover .dz-remove{opacity:1}.vue-dropzone .dz-preview .dz-success-mark,.vue-dropzone .dz-preview .dz-error-mark{margin-left:auto!important;margin-top:auto!important;width:100%!important;top:35%!important;left:0}.vue-dropzone .dz-preview .dz-success-mark i,.vue-dropzone .dz-preview .dz-error-mark i{color:#fff!important;font-size:5rem!important}.vue-dropzone .dz-preview .dz-error-message{top:calc(50% + 25px);left:calc(50% - 35px)}
