@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap";
.login-wrapper{--barney-start:#8e2de2;--barney-stop:#4a00e0;--barney-bg-color:#250070;--barney-color:#fffc;--barney-submit-icon-color:#fff;--barney-input-bg-color:#0006;--barney-input-icon-color:#ffffff4d;--barney-input-focus-icon-color:#e82777;--barney-input-focus-bg-color:#000000b3;--barney-placeholder-color:#ffffffb3;--barney-submit-color:#fff;--slate-start:#606c88;--slate-stop:#3f4c6b;--slate-bg-color:#343e58;--slate-color:#fffc;--slate-submit-icon-color:#fff;--slate-input-bg-color:#0006;--slate-input-icon-color:#ffffff4d;--slate-input-focus-icon-color:#ffc329;--slate-input-focus-bg-color:#00000080;--slate-placeholder-color:#ffffffb3;--slate-submit-color:#fff;--candy-start:#009fff;--candy-stop:#ec2f4b;--candy-bg-color:#00293d;--candy-color:#fffc;--candy-submit-icon-color:#fff;--candy-input-bg-color:#0006;--candy-input-icon-color:#ffffff4d;--candy-input-focus-icon-color:#24b7ff;--candy-input-focus-bg-color:#00000080;--candy-placeholder-color:#ffffffb3;--candy-submit-color:#fff;--firewatch-start:#ef473a;--firewatch-stop:#cb2d3e;--firewatch-bg-color:#8f150c;--firewatch-color:#fffc;--firewatch-submit-icon-color:#fff;--firewatch-input-bg-color:#0006;--firewatch-input-icon-color:#ffffff4d;--firewatch-input-focus-icon-color:#ff362a;--firewatch-input-focus-bg-color:#00000080;--firewatch-placeholder-color:#ffffffb3;--firewatch-submit-color:#fff;--citrus-start:#fdc012;--citrus-stop:#f37335;--citrus-bg-color:#c0560c;--citrus-color:#fffc;--citrus-submit-icon-color:#fff;--citrus-input-bg-color:#0006;--citrus-input-icon-color:#ffffff4d;--citrus-input-focus-icon-color:#ffe142;--citrus-input-focus-bg-color:#00000080;--citrus-placeholder-color:#ffffffb3;--citrus-submit-color:#fff;--marsh-start:#8dc26f;--marsh-stop:#76b852;--marsh-bg-color:#518336;--marsh-color:#fffc;--marsh-submit-icon-color:#fff;--marsh-input-bg-color:#0006;--marsh-input-icon-color:#ffffff4d;--marsh-input-focus-icon-color:#86dd54;--marsh-input-focus-bg-color:#00000080;--marsh-placeholder-color:#ffffffb3;--marsh-submit-color:#fff;--frost-start:#004e92;--frost-stop:#000d7a;--frost-bg-color:#00052d;--frost-color:#fffc;--frost-submit-icon-color:#fff;--frost-input-bg-color:#0006;--frost-input-icon-color:#ffffff4d;--frost-input-focus-icon-color:#24b7ff;--frost-input-focus-bg-color:#00000080;--frost-placeholder-color:#ffffffb3;--frost-submit-color:#fff;--bg-color:var(--barney-bg-color);--color:var(--barney-color);--start:var(--barney-start);--stop:var(--barney-stop);--submit-icon-color:var(--barney-submit-icon);--input-bg-color:var(--barney-input-bg-color);--input-icon-color:var(--barney-input-icon-color);--input-focus-icon-color:var(--barney-input-focus-icon-color);--input-focus-bg-color:var(--barney-input-focus-bg-color);--placeholder-color:var(--barney-placeholder-color);--submit-color:var(--barney-submit-color);background-color:var(--bg-color);color:var(--color);flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:Poppins,sans-serif;transition:background-color .3s ease-in-out;display:flex}.login-wrapper.barney{--bg-color:var(--barney-bg-color);--color:var(--barney-color);--start:var(--barney-start);--stop:var(--barney-stop);--submit-icon-color:var(--barney-submit-icon);--input-bg-color:var(--barney-input-bg-color);--input-icon-color:var(--barney-input-icon-color);--input-focus-icon-color:var(--barney-input-focus-icon-color);--input-focus-bg-color:var(--barney-input-focus-bg-color);--placeholder-color:var(--barney-placeholder-color);--submit-color:var(--barney-submit-color)}.login-wrapper.slate{--bg-color:var(--slate-bg-color);--color:var(--slate-color);--start:var(--slate-start);--stop:var(--slate-stop);--submit-icon-color:var(--slate-submit-icon);--input-bg-color:var(--slate-input-bg-color);--input-icon-color:var(--slate-input-icon-color);--input-focus-icon-color:var(--slate-input-focus-icon-color);--input-focus-bg-color:var(--slate-input-focus-bg-color);--placeholder-color:var(--slate-placeholder-color);--submit-color:var(--slate-submit-color)}.login-wrapper.candy{--bg-color:var(--candy-bg-color);--color:var(--candy-color);--start:var(--candy-start);--stop:var(--candy-stop);--submit-icon-color:var(--candy-submit-icon);--input-bg-color:var(--candy-input-bg-color);--input-icon-color:var(--candy-input-icon-color);--input-focus-icon-color:var(--candy-input-focus-icon-color);--input-focus-bg-color:var(--candy-input-focus-bg-color);--placeholder-color:var(--candy-placeholder-color);--submit-color:var(--candy-submit-color)}.login-wrapper.firewatch{--bg-color:var(--firewatch-bg-color);--color:var(--firewatch-color);--start:var(--firewatch-start);--stop:var(--firewatch-stop);--submit-icon-color:var(--firewatch-submit-icon);--input-bg-color:var(--firewatch-input-bg-color);--input-icon-color:var(--firewatch-input-icon-color);--input-focus-icon-color:var(--firewatch-input-focus-icon-color);--input-focus-bg-color:var(--firewatch-input-focus-bg-color);--placeholder-color:var(--firewatch-placeholder-color);--submit-color:var(--firewatch-submit-color)}.login-wrapper.citrus{--bg-color:var(--citrus-bg-color);--color:var(--citrus-color);--start:var(--citrus-start);--stop:var(--citrus-stop);--submit-icon-color:var(--citrus-submit-icon);--input-bg-color:var(--citrus-input-bg-color);--input-icon-color:var(--citrus-input-icon-color);--input-focus-icon-color:var(--citrus-input-focus-icon-color);--input-focus-bg-color:var(--citrus-input-focus-bg-color);--placeholder-color:var(--citrus-placeholder-color);--submit-color:var(--citrus-submit-color)}.login-wrapper.marsh{--bg-color:var(--marsh-bg-color);--color:var(--marsh-color);--start:var(--marsh-start);--stop:var(--marsh-stop);--submit-icon-color:var(--marsh-submit-icon);--input-bg-color:var(--marsh-input-bg-color);--input-icon-color:var(--marsh-input-icon-color);--input-focus-icon-color:var(--marsh-input-focus-icon-color);--input-focus-bg-color:var(--marsh-input-focus-bg-color);--placeholder-color:var(--marsh-placeholder-color);--submit-color:var(--marsh-submit-color)}.login-wrapper.frost{--bg-color:var(--frost-bg-color);--color:var(--frost-color);--start:var(--frost-start);--stop:var(--frost-stop);--submit-icon-color:var(--frost-submit-icon);--input-bg-color:var(--frost-input-bg-color);--input-icon-color:var(--frost-input-icon-color);--input-focus-icon-color:var(--frost-input-focus-icon-color);--input-focus-bg-color:var(--frost-input-focus-bg-color);--placeholder-color:var(--frost-placeholder-color);--submit-color:var(--frost-submit-color)}ul.theme-picker{background-color:#00000080;border-radius:8px;margin-top:50px;margin-bottom:50px;padding:7px 7px 7px 0;list-style-type:none;display:flex}ul.theme-picker li{z-index:1;cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:30px;height:30px;margin-right:8px;transition:all .2s ease-in-out;display:flex;position:relative}ul.theme-picker li:before{content:"";opacity:0;color:#fff;pointer-events:none;background-color:#222;border-radius:4px;padding:6px 10px;font-size:12px;display:block;position:absolute;top:-45px}ul.theme-picker li:hover:before{opacity:1}ul.theme-picker li:last-child{margin-right:0}ul.theme-picker li.barney{background:linear-gradient(225deg,var(--barney-start)16%,var(--barney-stop)100%)}ul.theme-picker li.barney:before{content:"Barney"}ul.theme-picker li.slate{background:linear-gradient(225deg,var(--slate-start),var(--slate-stop))}ul.theme-picker li.slate:before{content:"Slate"}ul.theme-picker li.candy{background:linear-gradient(225deg,var(--candy-start),var(--candy-stop))}ul.theme-picker li.candy:before{content:"Candy"}ul.theme-picker li.firewatch{background:linear-gradient(225deg,var(--firewatch-start),var(--firewatch-stop))}ul.theme-picker li.firewatch:before{content:"Firewatch"}ul.theme-picker li.citrus{background:linear-gradient(225deg,var(--citrus-start),var(--citrus-stop))}ul.theme-picker li.citrus:before{content:"Citrus"}ul.theme-picker li.marsh{background:linear-gradient(225deg,var(--marsh-start),var(--marsh-stop))}ul.theme-picker li.marsh:before{content:"Marsh"}ul.theme-picker li.frost{background:linear-gradient(225deg,var(--frost-start),var(--frost-stop))}ul.theme-picker li.frost:before{content:"Frost"}ul.theme-picker li.pressed,ul.theme-picker li.pressed:hover{transform:scale(1)}ul.theme-picker li.pressed:before{content:"";opacity:0}ul.theme-picker li.pressed:after{content:"✓";color:#fff;font-size:18px;font-weight:700}ul.theme-picker li:hover{transform:scale(1.2)}.login-form-custom{background:linear-gradient(225deg,var(--start)16%,var(--stop)100%);text-align:center;width:375px;transform-style:preserve-3d;perspective:1000px;border-radius:8px;padding:20px 30px;box-shadow:0 10px 30px #0003}.login-form-custom.wide-form{width:90%;max-width:800px}.login-form-custom.rotate{animation-name:rotate;animation-duration:1.2s;animation-timing-function:ease;animation-iteration-count:1;animation-fill-mode:forwards}.login-form-custom i{color:var(--submit-icon-color);font-size:30px;transition:color .25s ease-in}.input-wrapper{margin-bottom:15px;position:relative;transform:translateZ(50px)}.input-wrapper i{color:var(--input-icon-color);pointer-events:none;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.login-form-custom h1{letter-spacing:0;color:var(--color);margin:25px 0 0;font-size:26px;font-weight:600;transform:translateZ(50px)}.login-form-custom p{color:var(--color);margin:2px 0 44px;font-size:16px;transform:translateZ(50px)}.login-form-custom input:not([type=file]):not([type=checkbox]):not([type=radio]){color:#333;background-color:#ffffffe6;border:none;border-radius:6px;width:100%;padding:14px 12px;font-size:16px;font-weight:500;transition:all .25s ease-in-out}.login-form-custom input:focus{background-color:var(--input-focus-bg-color);color:#fff;outline:none}.login-form-custom input:focus+i{color:var(--input-focus-icon-color)}.login-form-custom ::placeholder{color:#666;opacity:1;font-size:16px}.login-form-custom input:focus::placeholder{color:#ffffffb3}.button-wrapper{margin-top:20px;transform:translateZ(50px)}.login-form-custom button[type=submit]{color:var(--submit-color);cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:12px 10px;font-size:16px;display:flex}.login-form-custom button[type=submit]:hover{background:#ffffff1a}.login-form-custom button[type=submit] i{margin-left:5px}@keyframes rotate{0%{transform:rotate3d(0,0,0,0)}to{transform:rotateY(360deg)}}