.charcreator{position:absolute;top:0;right:0;bottom:0;left:0;font-family:Roboto,sans-serif;font-size:13px;line-height:1.5;color:#cdcdcd}.creator,.handler,.navigation{width:clamp(380px,28vw,500px)}.navigation{position:absolute;left:0;top:0;height:30px;margin:10px 0;display:flex;justify-content:center;flex-direction:row;border-right:1px solid rgba(128,128,128,.06);box-shadow:0 1px 25px #0000001a}.navigation li{width:100%;text-transform:uppercase;font-size:1.4rem;padding:15px 0;min-height:35px;color:#6b6b6b;background:#fff;transition:all .5s ease;display:flex;justify-content:center;align-items:center;position:relative}.navigation li:after{content:"";position:absolute;right:-1px;height:100%;width:2px;background:#6a50aa;opacity:0;transition:all .5s ease}.navigation li:hover{filter:brightness(1.25);color:#000}.navigation li.active{color:#fff;background:#6a50aa;box-shadow:3.58px 7.562px 10px #6836af73,5.137px 7.384px 150px #5732dc59}.navigation li.locked{opacity:.35;cursor:not-allowed}.navigation li.active:after{opacity:1;box-shadow:#6a50aa 0 -5px 7px,#3a81bc 0 4px 15px}.creator{position:absolute;left:0;top:60px;height:calc(100vh - 60px);background:#f9f9f9;box-shadow:0 1px 25px #0000001a}.handler{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;overflow:hidden}.slides{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}.slides .slide{width:100%;height:100%;min-height:100%;flex:0 0 100%;overflow:hidden}.header{position:relative;overflow:hidden;width:100%;height:120px;margin:auto;box-shadow:#00000040 0 1px 1px,#0003 0 2px 5px;display:flex;justify-content:center;align-items:center}.header h2{position:relative;width:70%;text-align:center;font-size:2.2rem;font-style:italic;text-transform:uppercase;color:#f5f5f5;letter-spacing:1.2px;text-shadow:0 0px 2px rgba(0,0,0,.25)}.header h2:before{content:attr(data-before);position:absolute;left:0;top:-1rem;font-style:italic;margin:auto;opacity:.35;line-height:2.8rem;letter-spacing:.8rem;font-size:2.2rem;filter:blur(.12rem)}.bg{background:url(../images/charcreator/header.jpg);background-size:cover}.slidecontainer{height:calc(98% - 150px);width:95%;margin:auto;margin-top:.5rem;overflow-y:auto}.infotext{width:95%;margin:.8rem auto 0;display:flex;flex-direction:column;text-align:center;color:#333;font-size:1.25rem}.slidebox{width:95%;margin:0 auto;display:flex;flex-direction:column}label{width:95%;margin:1rem auto .5rem;padding:0 .75rem;display:inline-block;font-size:1.3rem;letter-spacing:-.01rem;color:#752cbd;border-left:.3rem solid #752cbd;border-radius:.3rem;background:#6a50aa1a}.form-control{margin:0 auto;width:95%;display:flex;flex-wrap:wrap;justify-content:center;grid-gap:10px;align-items:center}.error{width:100%;border-left:.3rem solid rgb(255,80,80);border-radius:.3rem;background:#ff50501a;font-size:1rem;color:#ff5050d9;padding:0 .75rem;display:inline-block;letter-spacing:-.01rem}.pagenav{width:95%;margin:2rem auto 0;display:flex;justify-content:flex-end;font-size:1.2rem}.pagenav button{padding:.75rem 1.5rem;border:none;border-radius:.3rem;color:#fafafa;background:#6a50aa;transition:.2s ease}.pagenav button:hover{cursor:pointer;background:#6a50aabf}.pagenav button.inactive{cursor:not-allowed;color:#64646480;background:#969696bf}input{border:.1rem solid rgba(0,0,0,.1);border-radius:.3rem;width:100%;padding:.5rem 1rem;color:#555;font-size:1.1rem;transition:border .75s ease,background .75s ease}input.invalid{border-color:#ff505099;background:#ff50501a}input[type=date]{text-transform:uppercase}input[type=range]{margin:.5rem auto;-webkit-appearance:none;width:100%;padding:.2em .1em;height:.2rem;border:.1rem solid rgba(0,0,0,.2);border-radius:.3rem;background:#6a50aa1a;box-shadow:0 5px 10px #00000012;opacity:.7;transition:all .3s}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.2rem;height:1.2rem;border-radius:50%;background:#6a50aa;cursor:pointer;border:.15rem solid white;box-shadow:0 0 .4rem #6a50aa80;transition:transform .15s ease}input:focus{outline:none;border:.1rem solid rgba(0,0,0,.25);background:#6a50aa1a}input[type=range]:focus{background:#6a50aa4d}.genderbox{margin:.5rem auto;width:95%;display:flex;justify-content:center}.gender{cursor:pointer;width:50%;filter:grayscale(100%);transition:transform 1.5s cubic-bezier(.22,1,.36,1),filter 1.5s cubic-bezier(.22,1,.36,1)}.gender:hover{filter:grayscale(30%) drop-shadow(0 0 .5rem rgba(117,44,189,.5));z-index:20}.gender.active{filter:grayscale(0%) drop-shadow(0 0 .4rem rgba(117,44,189,.8));z-index:10}.parentsbox{margin:.5rem auto;width:95%;display:flex;justify-content:center;background:url(../images/charcreator/parents-bg.jpg);background-size:cover;padding:1.5rem .5rem 0;border-radius:.3rem;border:.1rem solid rgb(255,255,255)}.parentsbox .face-portrait{width:50%;position:relative;filter:brightness(.95);filter:drop-shadow(0 0 .5rem rgba(0,0,0,.3))}.parentsbox .female{filter:brightness(1);transform:translate(1.5rem);z-index:5}.parentsbox .male{transform:translate(-1.5rem);z-index:0}.fade-enter-active,.fade-leave-active{transition:opacity 1.5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.serverversion{position:absolute;bottom:.25rem;right:2rem;font-family:Roboto;text-align:right;letter-spacing:-.075rem;font-size:.8rem;color:#646464;z-index:100}