*{box-sizing:border-box;padding:0;margin:0}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input,button{border:none;outline:none;background:none;font-family:inherit}.demo-container{min-height:100vh;display:flex;justify-content:center;align-items:center;position:relative}.animated-border{--bw: var(--border-width, 4px);z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:5px;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,var(--bw) var(--bw),var(--bw) calc(100% - var(--bw)),calc(100% - var(--bw)) calc(100% - var(--bw)),calc(100% - var(--bw)) var(--bw),var(--bw) var(--bw));clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,var(--bw) var(--bw),var(--bw) calc(100% - var(--bw)),calc(100% - var(--bw)) calc(100% - var(--bw)),calc(100% - var(--bw)) var(--bw),var(--bw) var(--bw))}.animated-border:before{content:"";position:absolute;left:60%;border-radius:10px;top:50%;width:250%;padding-bottom:150%;transform:translate(-50%,-50%);background:conic-gradient(from 270deg,#ff7f00 10%,#f50 35%,#ff3f00,#ff2f00,#ff1f00 72%,#ff1f00 75%,#ff0f00 95%);animation:rotateBtnBg 3s linear infinite}.local-container{width:800px;max-width:100%;padding:20px}.demo{--switcher-width: 260px;--arrow-offset: 30px;--anim-time: 1.2s;--transition-transform: transform var(--anim-time) ease-in-out;--transition-opacity: opacity 0s calc(var(--anim-time) / 2);--btn-height: 36px;height:350px;filter:drop-shadow(0 0 50px rgba(0,0,0,.3))}.demo button{display:block;margin:0 auto;height:var(--btn-height);color:#fff;font-size:15px;cursor:pointer}.demo button:disabled{cursor:not-allowed}.demo__inner{--demoX1: 0;--demoX2: calc(100% - var(--arrow-offset));--demoX3: 100%;--demoX4: calc(100% - var(--arrow-offset));--demoX5: 0;--demoX6: 0;overflow:hidden;height:100%;padding-right:var(--switcher-width);background:#fff;transition:-webkit-clip-path var(--anim-time) ease-in-out;transition:clip-path var(--anim-time) ease-in-out;transition:clip-path var(--anim-time) ease-in-out,-webkit-clip-path var(--anim-time) ease-in-out;will-change:clip-path;-webkit-clip-path:polygon(var(--demoX1) 0,var(--demoX2) 0,var(--demoX3) 50%,var(--demoX4) 100%,var(--demoX5) 100%,var(--demoX6) 50%);clip-path:polygon(var(--demoX1) 0,var(--demoX2) 0,var(--demoX3) 50%,var(--demoX4) 100%,var(--demoX5) 100%,var(--demoX6) 50%)}.demo.s--switched .demo__inner{--demoX1: var(--arrow-offset);--demoX2: 100%;--demoX3: 100%;--demoX4: 100%;--demoX5: var(--arrow-offset);--demoX6: 0}.demo__forms{height:100%;transition:var(--transition-transform);will-change:transform}.demo.s--switched .demo__forms{transform:translate(var(--switcher-width))}.demo__form{position:absolute;top:0;right:0;bottom:0;left:0;transition:var(--transition-opacity);max-height:540px;overflow-y:auto}.demo.s--switched .demo__form:first-child{opacity:0;pointer-events:none}.demo__form:last-child{opacity:0;pointer-events:none}.demo.s--switched .demo__form:last-child{opacity:1;pointer-events:auto}.demo__form-content{width:var(--switcher-width);margin:0 auto}.demo__switcher{--x1: calc(100% - var(--switcher-width));--x2: calc(100% - var(--arrow-offset));--x3: 100%;--x4: calc(100% - var(--arrow-offset));--x5: calc(100% - var(--switcher-width));--x6: calc(100% - var(--switcher-width) + var(--arrow-offset));z-index:2;overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;background-image:url(/build/assets/backlogin-register-CL0P5rNj.png);background-size:cover;background-position:center center;-webkit-clip-path:polygon(var(--x1) 0,var(--x2) 0,var(--x3) 50%,var(--x4) 100%,var(--x5) 100%,var(--x6) 50%);clip-path:polygon(var(--x1) 0,var(--x2) 0,var(--x3) 50%,var(--x4) 100%,var(--x5) 100%,var(--x6) 50%);transition:-webkit-clip-path var(--anim-time) ease-in-out;transition:clip-path var(--anim-time) ease-in-out;transition:clip-path var(--anim-time) ease-in-out,-webkit-clip-path var(--anim-time) ease-in-out;will-change:clip-path}.demo.s--switched .demo__switcher{--x1: var(--arrow-offset);--x2: var(--switcher-width);--x3: calc(var(--switcher-width) - var(--arrow-offset));--x4: var(--switcher-width);--x5: var(--arrow-offset);--x6: 0}.demo__switcher:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#0009}.demo__switcher-inner{height:100%;transition:var(--transition-transform);will-change:transform}.demo.s--switched .demo__switcher-inner{transform:translate(calc((100% - var(--switcher-width)) * -1))}.demo__switcher-content{overflow:hidden;position:absolute;right:0;top:0;display:flex;flex-direction:column;justify-content:center;column-gap:20px;width:var(--switcher-width);height:100%}.demo__switcher-text{display:flex;flex-wrap:nowrap;height:140px;color:#fff;transition:var(--transition-transform);will-change:transform}.demo.s--switched .demo__switcher-text{transform:translate(-100%)}.demo__switcher-text>div{width:100%;flex-shrink:0;text-align:center}.demo__switcher-text>div:first-child{padding-left:calc(var(--arrow-offset) + 10px);padding-right:calc(var(--arrow-offset) - 10px)}.demo__switcher-text>div:last-child{padding-left:calc(var(--arrow-offset) - 10px);padding-right:calc(var(--arrow-offset) + 10px)}.demo__switcher-text>div h3{margin-bottom:20px}.demo__switcher-text>div p{font-size:15px}.demo__switcher-btn{--btn-width: 100px;--border-width: 3px;overflow:hidden;width:var(--btn-width);position:relative}@keyframes rotateBtnBg{to{transform:translate(-50%,-50%) rotate(360deg)}}.demo__switcher-btn-inner{z-index:1;position:absolute;top:0;right:0;bottom:0;left:0;font-weight:600;position:relative}.demo__switcher-btn-inner span{display:block;height:100%;line-height:var(--btn-height);text-align:center;text-transform:uppercase;transition:var(--transition-transform);will-change:transform;position:relative;color:#fff;font-size:11px}.demo.s--switched .demo__switcher-btn-inner span{transform:translateY(-100%)}.form{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:30px 0;row-gap:20px;text-align:center;transition:transform var(--anim-time, 1.2s);will-change:transform}.form__heading{font-size:20px;font-weight:700}.form__field{width:100%}.form__field-label{font-size:12px;color:#7a7676;text-transform:capitalize}.form__field-input{display:block;width:100%;max-width:100%;margin-top:5px;padding-bottom:5px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.4);text-align:center}.form__submit{width:100%;background:#e9a240;border-radius:10px}.form__submit--disabled{background:#f2d6b3;cursor:not-allowed}.form__error{color:#d8000c;background-color:#ffd2d2;padding:10px;margin-top:4px;border-radius:5px;font-size:.875em}@media (max-width: 768px){*{box-sizing:border-box;padding:0;margin:.2px}html body{background-image:linear-gradient(#ecf4ff,#fff,#fff)}.demo-container{display:flex;flex-direction:column;align-items:center;padding:20px;height:100%}.local-container{display:flex;flex-direction:column;align-items:center;padding:0;border-radius:10px;overflow:visible;background:#fff;box-shadow:0 0 10px #0000001a;position:relative;height:100%}.demo{--switcher-width: 260px;--arrow-offset: 0px;--anim-time: 1.2s;--transition-transform: transform var(--anim-time) ease-in-out;--transition-opacity: opacity 0s calc(var(--anim-time) / 2);--btn-height: 36px;display:flex;flex-direction:column;align-items:center;width:100%;background:#fff;position:relative;height:100%;filter:none}.demo__switcher{--x1: calc(100% + -0) ;--x2: calc(100% - var(--arrow-offset));--x3: 100%;--x4: calc(100% - var(--arrow-offset));--x5: calc(100% - var(--switcher-width));--x6: calc(100% - var(--switcher-width) + var(--arrow-offset));height:100px;width:100%;background-color:#333;color:#fff;text-align:center;padding:3px 4px;border-radius:10px 10px 0 0;z-index:2;display:block}.demo__switcher:before{content:"";position:absolute;left:0;top:0;width:100%;height:100px;background:#0009;border-radius:10px 10px 0 0}.demo__switcher-inner{width:100%;height:100%;transition:var(--transition-transform);will-change:transform;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.demo__switcher-content{width:100%;display:flex;align-items:center;align-content:flex-end;flex-direction:row}.demo__switcher-text{width:100%;text-align:center;padding:10px 0;display:block;height:100%;overflow:hidden}.demo__switcher-text>div:first-child{padding-left:calc(var(--arrow-offset) + 10px);padding-right:calc(var(--arrow-offset) - 10px)}.demo__switcher-text>div:last-child{opacity:0;display:none;padding-left:calc(var(--arrow-offset) - 10px);padding-right:calc(var(--arrow-offset) + 10px)}.demo__switcher-btn-inner{width:100%;text-align:center;display:flex;font-weight:300}.demo__switcher-btn-inner>span:first-child{font-size:12px;display:block;line-height:13px;padding:10px}.demo__switcher-btn-inner>span:last-child{font-size:12px;display:block;line-height:13px;padding:5px 27px}.demo__switcher-btn{--btn-width: 100px;--border-width: 3px;overflow:visible;width:var(--btn-width);position:relative}.demo__form{width:100%;height:100%;padding:0;position:absolute;border-radius:0 0 10px 10px;display:flex;flex-direction:column;align-items:center;background:#fff;box-shadow:none;overflow-y:visible}.demo__form-content{padding:0}.form{display:flex;flex-direction:column;align-items:center;width:100%;padding:20px 0;row-gap:15px}.form__field-input{width:100%;padding:10px;font-size:14px;border-radius:5px;border:1px solid #ccc}.form__submit{width:100%;padding:10px;font-size:14px;background:#e9a240;border-radius:10px;color:#fff;border:none}.demo__inner{overflow:visible;height:100%;background:#fff;transition:none;-webkit-clip-path:none;clip-path:none}.demo.s--switched .demo__switcher{--x1: calc(100% + -0) ;--x2: var(--switcher-width);--x3: calc(var(--switcher-width) - var(--arrow-offset));--x4: var(--switcher-width);--x5: var(--arrow-offset);--x6: 0}.demo.s--switched .demo__switcher-inner{transform:none}.demo__switcher-btn-inner span{display:block;height:100%;text-align:center;text-transform:uppercase;transition:transform .5s ease,opacity .5s ease;will-change:transform,opacity;color:#fff}.demo__switcher-btn-inner>span:first-child{transform:translateY(0);opacity:1;z-index:1}.demo__switcher-btn-inner>span:last-child{transform:translate(100%);opacity:0;z-index:0}.demo.s--switched .demo__switcher-btn-inner>span:first-child{transform:translateY(-100%);opacity:0;z-index:0}.demo.s--switched .demo__switcher-btn-inner>span:last-child{transform:translate(-100%);opacity:1;z-index:1}.demo.s--switched .demo__switcher-text{transform:none}.demo__switcher-text>div:last-child{opacity:1;display:block;padding-left:unset;padding-right:unset}.demo__switcher-text>div{display:block;width:100%;transition:transform .5s ease,opacity .5s ease;will-change:transform,opacity}.demo__switcher-text>div:first-child{transform:translateY(0);opacity:1;z-index:1}.demo__switcher-text>div:last-child{transform:translateY(100%);opacity:0;z-index:0}.demo.s--switched .demo__switcher-text>div:first-child{transform:translateY(-100%);opacity:0;z-index:0}.demo.s--switched .demo__switcher-text>div:last-child{transform:translateY(-100%);opacity:1;z-index:1}.demo.s--switched .demo__forms{transform:none}.demo__forms{transition:transform .6s ease-in-out;margin-top:100px}.demo__forms>div:first-child{transform:translate(0);opacity:1;z-index:1;top:0;left:0;width:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.demo__forms>div:last-child{transform:translate(100%);opacity:0;z-index:0;top:0;left:0;width:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.demo.s--switched .demo__forms>div:first-child{transform:translate(-100%);opacity:0;z-index:0}.demo.s--switched .demo__forms>div:last-child{transform:translate(0);opacity:1;z-index:1}.demo__switcher-text>div:last-child h3{margin-bottom:10px}}