.gender{display:flex;max-width:336px;width:100%;position:relative;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;margin:0 auto;border:1px solid rgba(0,0,0,.3);border-radius:3px;color:rgba(0,0,0,.3)}.gender>input{display:none}.gender>input:checked+label{color:#fff}.gender>input:first-of-type:checked~label:last-of-type:before{transform:translateX(calc(0 + 0))}.gender>input:nth-of-type(2):checked~label:last-of-type:before{transform:translateX(calc(100% + 0))}.gender label{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.gender label:last-of-type:before{content:"";display:block;max-width:calc(50% - 0px);margin:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;transform:translateX(0)}.gender label{padding:6px 3px;transition:color 250ms cubic-bezier(0, .95, .38, .98);font-size:16px}.gender label:before{background:#5f5f5f;background:#7baec6;transition:all 250ms cubic-bezier(0, .95, .38, .98)}.special label:before{background:#db8383}.username{display:table-column}