*{
    font-family: Noto Sans!important;
}
.bg-black{
    background: var(--primary-black, #000);
    color: white;
}
.set-nav{
    position: fixed;
    justify-content: space-between;
    width: calc(100% - 100px)!important;
    min-width: none;
    top: 5vh;
}
.aside-select-item{
    position: absolute;
    z-index: 999;
    padding: 15px 5px;
    /* height: 50px; */
    border-radius: 8px;
    background: var(--primary-light-blue, #C8E8FF);
    transition: ease-in-out .3s;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.s-item:hover{
    color: #ff5d5d !important;
    text-decoration-line: underline;
}
.aside-select-item{
    top: calc(5vh + 60px);
    right: 4%;
    width: 85px;
}
.aside-select-item::before {
    content: "";
    position: absolute;
    top: -18px;
    right: 5px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #C8E8FF transparent;
  }
.aside-select-item .s-item{
    text-transform: capitalize;
    font-size: 0.9rem;
    color: #000;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
}
.aside-select-item .s-item img{
    width: 20px;
}
.flex{
    display: flex!important;
    flex-wrap: unset!important;
}
.p-2{
    padding: 20px;
}
.wrap{
    padding: 0 50px;
}
.mt-5{
    margin-top: 40px;
}
.set-between{
    justify-content: space-between;
    align-items: center;
}
.flex-align-center{
    display: flex;
    align-items: center;
}
.header-logo{
    user-select: none;
}
.header-logo .logo-img{
    height: 50px!important;
}
.asdie-user .logo-img{
    height: 35px!important;
}
.asdie-user{
    cursor: pointer;
    user-select: none;
}
.user-name{
    color: rgb(178,178,178);
}
.asdie-user .name{
    color: white;
    font-weight: bold;
    font-size: large;
    display: inline-block;
    margin-top: 4px;
    margin-left: 4px;
}
.ml-2{
    margin-left: 22px;
}
.ml-1{
    margin-left: 5px;
}
.body-login{
    position: relative;
    margin-top: 20vh;
}
.main-box{
    width: 45vw;
    max-width: 500px;
    margin: 0 auto;
}
.set-main-box{
    width: 45vw!important;
    max-width: 500px!important;
    margin: 0 auto!important;
}
.upload-box{
    width: 45vw;
    max-width: 750px!important;
}
.main-box .welcome{
    font-size: 20px;
}
.main-box .logo-img{
    height: 40px!important;
}
.mt-1{
    margin-top: 12px;
}
.mt-2{
    margin-top: 22px;
}
.mt-6{
    margin-top: 62px;
}
.body-type{
    font-size: 25px;
}
.input div{
    display: grid;
    justify-items: stretch;
    align-items: center;
}
.w-60{
    width: 60%;
}
.verify-box{
    max-width: 850px!important;
}
.set-up-input div{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    word-wrap: break-word;
}
.input input{
    height: 20px;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 15px;
}
.mt-3{
    margin-top: 32px;
}
.mt-4{
    margin-top: 42px;
}
.text-center{
    text-align: center;
}
.login-btn{
    padding: 10px 25px;
    background-color: transparent;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 8px;
    letter-spacing: 2px;
    border: 1px solid transparent;
    transition: ease-out .2s;
}
.login-btn:hover{
    /* background-color: #ffcc6d; */
    border: 1px white solid;
    transition: ease-in-out .3s;
}
.login-btn:active{
    /* background-color: #ff5d5d; */
    transition: ease-in .2s;
}
.upper-text{
    text-transform: uppercase;
}
.register-tips a{
    color: rgb(126,201,255);
}
.mt-10{
    margin-top: 100px;
}
.notes{
    padding: 20px;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 900px!important;
    background: rgba(88, 91, 115, 0.4);
    border-radius: 18px;
}
.notes .dev-team{
    font-size: 20px;
}
.notes ul {
    margin-bottom: 0!important;
    font-size: 13px;
    line-height: 1.4;
    list-style-type: decimal;
}
.notes ul li{
    margin-top: 5px;
}
.create-btn{
    border-radius: 100px;
    padding: 13px 30px;
    width: 100%;
    opacity: 0.3;
    background: var(--primary-white, #FFF);
    color: var(--primary-black, #000);
    text-align: center;
    font-family: Roboto Mono;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    border: unset;
}
.success-bg{
    opacity: unset!important;
    background-color: #7EC9FF!important;
    transition: ease-out .2s;
}
.create-btn-hover:hover{
    background-color: #5EB6F5!important;
    transition: ease-in-out .3s;
}
.create-btn-hover:active{
    /* background-color: #ff5d5d!important; */
    transition: ease-in .2s;
}
.font-size-smaller{
    font-size: smaller;
}
.gray-font{
    color: rgb(178,178,178);
}
.font-size-large{
    font-size: 2.2rem;
}
.bold-font{
    font-size: 18px;
    color: white;
    font-weight: bold;
}
.shadow-box{
    display: grid;
    justify-items: center!important;
    align-items:unset!important;
    align-content: center;
    width: 100%;
    height: 180px;
    border-radius: 4px;
    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%));
}
.jsonico-wh{
    width: 55px;
}
.jsonico-wh2{
    width: 25px;
}
.select-file-btn{
    height: 40px;
    font-size: large;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 23px;
    width: 50%;
    background: var(--primary-white, #FFF);
}
.no-grid{
    display: flex!important;
}
.no-top{
    margin-top: 0!important;
}
.is_disabled_btn{
    opacity: 0.3!important;
    background: var(--primary-white, #FFF)!important;
}
.download-file-btn{
    font-size: smaller;
    font-weight: bold;
    width: 40%;
    right: 10%;
    top: -2px;
    position: absolute;
    /* padding: 5px 10px; */
    border-radius: 23px;
    /* width: 50%; */
    background: var(--primary-white, #FFF);
    height: 35px;
}
.aside-text-bt{
    color: var(--primary-blue, #7EC9FF);

}
.ct-box-h{
    height: 140px!important;
}
.set-ct-top{
    position: absolute;
    top: 5%;
    left: 2.5%;
    width: 100%;
    height: 40%;
    display: flex!important;
}
.justify-items-center{
    justify-items:center!important;
}
.normal-btn-hover{
    font-family: Roboto Mono!important;
    border: 1px solid transparent;
    transition: ease-out .2s;
}
.normal-btn-hover:hover{
    /* background-color: #ffcc6d!important; */
    transition: ease-in-out .3s;
}
.normal-btn-hover:active{
    /* background-color: #ff5d5d!important; */
    transition: ease-in .2s;
}
.primary-btn-hover{
    font-family: Roboto Mono!important;
    background-color: #7EC9FF;
    border: 1px solid transparent;
    transition: ease-out .2s;
}
.primary-btn-hover:hover{
    background-color: #5EB6F5!important;
    transition: ease-in-out .3s;
}
.primary-btn-hover:active{
    /* background-color: #ff5d5d!important; */
    transition: ease-in .2s;
}
.info-btn-hover{
    background-color: white;
    font-family: Roboto Mono!important;
    border: 1px solid transparent;
    transition: ease-out .2s;
}
.info-btn-hover:hover{
    background-color: #C8E8FF!important;
    transition: ease-in-out .3s;
}
.info-btn-hover:active{
    /* background-color: #ff5d5d!important; */
    transition: ease-in .2s;
}
.btn{
    font-size: large;
    font-weight: bold;
    padding: 10px 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-family: Roboto Mono!important;
    border-radius: 23px;
}
.w-100{
    width: 100%;
}
.border-r25{
    border-radius: 25px;
}
.bottom-bg{
    position: relative;
    width: 35vw;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
}
.bottom-bg img{
    cursor: default !important;
    width: 100%;
}
.big-user-profile{
    width: 100%;
}
.set-user-profile{
    justify-content: space-evenly;
    align-items: flex-end;
}
.select-item-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0.5px 0.5px 3px white;
    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%));
    transition: ease-out .3s;
}
.select-item-box{
    cursor: default;
    user-select: none!important;
}
.select-item-box img{
    width: 15%;
}
.select-item-box .font{
    font-size: 1.3rem;
}
.box-shadow-white{
    box-shadow: 1px 1px 3px white;
}
.box-shadow-white-smaller{
    box-shadow: 0.5px 0.5px 3px white;
}
.select-item-box:hover{
    transition: ease-in .3s;
}
.disable-select-item{
    opacity: 0.25;
    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%))!important;
    transition: ease-in-out .3s;
}
.copyright{
    padding: 20px 0;
    color: rgb(178,178,178);
    background: radial-gradient(27.91% 177.83% at 46.85% -20.11%, rgba(91, 94, 123, 0.60) 0%, rgba(91, 94, 123, 0.00) 100%)!important;
    font-size: smaller;
    margin: 0 auto;
    top: 40px;
    width: 100%;
    text-align: center;
    font-family: 'sans'!important;
    position: relative;
}
.frame-box{
    border-radius: 24px;
    border: 1px solid #5B5E7B;
    background: var(--primary-black, #000);
}
.copyright .cc-box{
    width: 80%;
    margin-left: 10%;
}
.copyright .bt-txt{
    margin-top: 15px!important;
}
.copyright .f2 .ml-4{
    margin-left: 20px!important;
}
.copyright .c-box{
    margin-top: 0px!important;
}
.copyright .header-logo img{
    width: 140px;
}
@font-face {
    font-family: 'sans';
    src: url('/assets/font/notosans/NotoSans-Regular-2.ttf') format('truetype')
}

.copyright .f1{
    color: var(--primary-white, #FFF);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 3px;
}
.copyright .f2{
    color: #FFF;
    text-align: center;
    font-family: 'sans'!important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 176.2%; /* 21.144px */
}
.copyright .i-icon{
    width: 28px;
}
.copyright .i-icon:last-of-type{
    margin-left: 5px;
}
.copyright .i-icon:first-of-type{
    margin-left: 5px;
}
.copyright .c-line{
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(35, 36, 46, 0.00) -2.52%, rgba(35, 36, 46, 0.98) 12.21%, #23242E 87.94%, rgba(35, 36, 46, 0.00) 105.79%);
}
.copyright .c-box{
    margin-left: 1%;
    justify-content: space-between;
    align-items: center;
}
.copyright .header-logo{
    margin-left: 1%;
    text-align: left;
}
.copyright .bt-txt{
    color: var(--primary-white, #FFF);
    text-align: center;
    font-family: Noto Sans;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 176.2%; /* 17.62px */
    opacity: 0.6;
}
.copyright .a-tg{
    color: var(--primary-white, #FFF)!important;
    font-family: Noto Sans;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 176.2%;
    text-decoration-line: underline;
}
.c-white{
    color: white;
}
.item-circle{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    text-align: center;
    border-radius: 50%;
    display: grid;
    align-items:center;
    background: linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%);
}
.item-circle span{
    font-size: 1.6rem;
    z-index: 1;
    color: white;
    line-height: 1;
}
.box-shadow-small{
    box-shadow: 0.5px 0.5px 3px white;
}
.item-line{
    background: transparent;
    width: 7vw;
    max-width: 80px;
    min-width: 5px;
    height: 2px;
    border-radius: 25%;
}
.font-size-noraml{
    font-size: 1.1rem;
}
.item-active{
    background-color: var(--primary-blue, #7EC9FF);
    transition: ease-in .3s;
}
.line-active{
    background: #7EC9FF;
    transition: ease-in .3s;
}
.user-face-wh{
    height: 150px;
}
.user-lock-h{
    overflow: hidden;
    height: 250px;
}
.no-h-set-p{
    padding: 15px 20px;
    height: unset!important;
}
.step-item{
    justify-content: center;
}
.no-select{
    user-select: none !important;
}
.set-upload-tips{
    width: 100%;
    /* max-width: 100%; */
    height: 100%;
    object-fit: contain;
}
.upload-tips{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}
.ml-4{
    margin-left: 44px;
}
.no-p-and-lf{
    border-radius: 16px!important;
    /* padding: 0 10px!important; */
    padding: 16px!important;
}
.p-t2{
    padding: 20px 0;
    border-radius: 16px!important;
}
.no-p-and-lf .dev-team{
    /* margin-top: 5%; */
}
.w-50{
    width: 50%;
    min-width: 200px;
}
.ww-50{
    width: 50%!important;
}
.set-switch-ico{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 38px;
}
.rel{
    position: relative;
}
.c-black{
    color: black!important;
}
.hidden-file-input{
    position: absolute;
    width: 100%;
    height: 100%!important;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
}
.up-default-h{
    height: 26vh;
    width: 30%;
    object-fit: contain;
}
.encryot-anima1{
 display: inline-block;
 animation: jump1 1.5s infinite alternate;
 transition:  ease-in 0.3s;
}
.encryot-anima2{
 display: inline-block;
 animation: jump2 1.3s infinite alternate;
 transition:  ease-out 0.3s;
}
@keyframes jump1 {
    0% { transform: translateY(1px); }
    30% { transform: translateY(0px); }
    60% { transform: translateY(-2px); }
}
@keyframes jump2 {
    0% { transform: translateY(-2px); }
    30% { transform: translateY(0px); }
    60% { transform: translateY(1px); }
}
.letter-sp2{
    user-select: none;
    letter-spacing: 2px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9999;
    display: none;
  }
.code-anima-box{
    opacity: .3;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden; /* 隐藏溢出的内容 */
    position: absolute; /* 设置子元素绝对定位时的参考对象 */
    user-select: none;
    cursor: default;
}
.code-anima-box img {
    position: absolute; /* 绝对定位，使图像重叠在一起 */
    width: 100%; /* 图片宽度与盒子相同 */
    height: 100%; /* 图片高度与盒子相同 */
    animation: scroll-animation 10s linear infinite; /* 使用滚动动画 */
}
  .code-anima-box div {
    width: 100%; /* 图片宽度与盒子相同 */
    height: 100%; /* 图片高度与盒子相同 */
  }
  @keyframes scroll-animation {
    0% { transform: translateY(0); } /* 初始位置：不移动 */
    50%, 100% { transform: translateY(-100%); } /* 向上滚动到顶部 */
  }
  .top0{
    top: 0;
  }
  .top20{
    top: 60%;
  }
  .top40{
    top: 120%;
  }
  .top60{
    top: 180%;
  }
  .toast {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    background: rgba(239, 133, 192, 0.50);
    color: #ffffff;
    padding: 10px 20px;
    user-select: none;
    letter-spacing: 1px;
    max-width: 750px;
    opacity: 0;
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
  }
  .toast-tips{
    background: rgb(121 255 113 / 50%)!important;
  }
  .no-flex{
    display: inherit!important;
  }
  .break-word{
    word-wrap: break-word;
  }
  .toast.show {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  .disabled-input{
    background: #4b4b4b!important;
    color: white!important;
    opacity: .8;
  }
  .change-btn{
    font-family: Roboto Mono!important;
    letter-spacing:unset!important;
    padding: 10px 30px!important;
    background-color:#7EC9FF!important;
    color: black!important;
    width: 100%;
    border: none!important;
  }
  .change-btn:hover{
    border: none!important;
    background-color: #5EB6F5!important;
    transition: ease-in-out .3s;
  }
  .change-btn:active{
    /* background-color: #ff5d5d!important; */
    transition: ease-in .2s;
}
.lottie-box{
    width: 30%;
    margin: 0 auto;
}