*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}body{height:100vh;overflow:hidden}.app-wrapper{height:100%;background-color:#0000;background-image:url(https://petrosphere.com.ph/enroll/asset/uploads/Petros-logo-white-logo-256x43.png),linear-gradient(#00000080,#00000080),url(bg.9ad20b84.jpg);background-position:0 0,50%,50%;background-repeat:no-repeat;background-size:20rem,cover,cover;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;justify-content:center;align-items:center;display:flex}.content-container{width:95%;max-width:700px;opacity:0;background:#fff;border-radius:8px 8px 3px 3px;transition:all .5s;position:absolute;overflow:hidden;box-shadow:0 1px 3px #0000001a}.content-container.active{opacity:1}.content-container .header{padding:.8rem 1.2rem 0 0;font-size:.8em}.content-container .header h3{width:90%;color:#fff;background:#333474;padding:.2em 1.2rem;font-weight:400;position:relative;overflow:hidden;box-shadow:-5px 1px 3px #0009}.content-container .header h3:after{content:"";width:45px;height:45px;background:#fff;border:5px solid #ffc402;position:absolute;top:0;right:-20px;transform:rotate(45deg)}.content-container .header-message{color:#888;margin-bottom:0;margin-left:20px;font-style:italic}.content-container .content{max-height:450px;padding:.8rem 1.2rem;overflow-y:auto}.content-container .footer{height:50px;background-color:#ffc402;flex-direction:row;display:flex;position:relative}.content-container .footer>span{width:max-content;color:#f1f1f1;background:#000c;border-radius:4px;padding:.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bordered-content{border:1px solid #0000004d;border-radius:5px;padding:.5em}.content-container .footer .btn{width:100%;text-transform:uppercase;padding:0 1.5em}.welcome--container{color:#fff;background:#000c!important}.instruction{max-height:200px;padding:.5em;overflow:auto;margin-top:20px!important}.welcome--container .footer{justify-content:center}.speed-metering{width:150px;height:150px;border:10px solid #333474;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex}.speed-metering h4{font-weight:800}.footer .btn--next{text-align:right}.footer .btn--start{text-align:center!important}.footer .btn--prev{text-align:left}.welcome--container .content{flex-direction:column;justify-content:center;align-items:center;display:flex}.bordered-box[data-title]{border:1px solid #0000004d;border-radius:3px;padding:.7em;position:relative}.bordered-box[data-title]:before{content:attr(data-title);width:max-content;color:#555;background:#fff;padding:0 .4em;position:absolute;top:-13px}.pm--img{width:120px;height:75px;cursor:pointer;border:2px solid #fff;border-radius:4px;margin-right:20px;box-shadow:0 0 3px 1px #00000080}.pm--img:hover{box-shadow:0 0 3px 1px #0a4ff180}.spinner-overlay{z-index:1055;width:100%;height:100%;-webkit-backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffffe6;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}@keyframes petrosSpin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.spinner{width:100px;height:100px;border:7px solid #333474;border-right-color:#ffc402;border-radius:50%;animation-name:petrosSpin;animation-duration:.8s;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute}form label span{color:#888;font-size:.75em;font-weight:500}form textarea{resize:none}form img{border-radius:4px;box-shadow:0 1px 4px #0000004d}form label.overlay{cursor:pointer;position:relative;overflow:hidden}form label.overlay:before{content:"Click to upload";opacity:0;width:100%;height:100%;color:#fff;-webkit-backdrop-filter:blur(-8px);-webkit-backdrop-filter:blur(-8px);backdrop-filter:blur(-8px);text-shadow:0 2px 6px #0006;background:#0006;border-radius:4px;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}form label.overlay:hover:before{opacity:1}form label.overlay.unchange:before{opacity:1!important}form h5{margin-bottom:.3em;font-size:1.05em}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}form input[type=file]{z-index:-1;max-width:1px;left:50%}input[type=number]{-moz-appearance:textfield}i.text-muted{font-size:.8em}.btn--start:after,.btn--next:after{content:"";width:1.2em;height:.7em;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3e%3cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M1.7797 8.0199h20.9252l-6.2016 6.2016'/%3e%3cpath d='M16.806 1.308l5.8236 6.5842-2.9118 3.0499'/%3e%3c/g%3e%3c/svg%3e");background-position:100%;background-repeat:no-repeat;background-size:1.15em;display:inline-block;position:relative;top:0;right:-.7em}.btn--prev:before{content:"";width:1.2em;height:.7em;background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='16'><g fill='none' fill-rule='evenodd' stroke='rgba(0,0,0, .7)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M22.2203 8.0199H1.2951l6.2016 6.2016'/><path d='M7.194 1.308L1.3704 7.8922l2.9118 3.0499'/></g></svg>");background-position:100%;background-repeat:no-repeat;background-size:1.15em;display:inline-block;position:relative;top:0;right:.7em}.btn-block{width:100%}.footer .btn--start:hover:after,.footer .btn--next:hover:after{animation:wiggleRight 1s}.footer .btn--prev:hover:before{animation:wiggleLeft 1s}@keyframes wiggleRight{25%,75%{right:-1.3em}50%,to{right:-.7em}}@keyframes wiggleLeft{25%,75%{right:1.3em}50%,to{right:.7em}}
/*# sourceMappingURL=index.1e999d34.css.map */