.sign-in-body {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/img/bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sign-in-container {
    width: 840px;
    height: 620px;
    border: 2px solid var(--default-border-color);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    background-color: var(--bg-normal-color);
    border-radius: 8px 8px 8px 8px;
    -webkit-box-shadow:0px 0px 45px 23px rgba(0,0,0,0.82);
    -moz-box-shadow: 0px 0px 45px 23px rgba(0,0,0,0.82);
    box-shadow: 0px 0px 45px 23px rgba(0,0,0,0.82);
}

.sign-in-segment {
    width: 50%;
    height: 100%;
    background-color: var(--bg-normal-color);
}

.sin-bg-window {
    background-image: url('@/assets/img/signin_window.jpg');
    background-position: center;
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 32px
}

.img-site-box {
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.img-logo {
    width: 300px;
    height: autopx;
}

.bt-sin {
    width: 100%;
}

.in-email {
    height: 64px;
}

.sin-mess {
    width: 100%;
    height: 48px;
    border-radius: 8px 8px 8px 8px;
    background-color: brown;
}

.sin-mess-visible {
    visibility: visible;
}

.sin-mess-hidden {
    visibility: hidden;
}

.lgn-input-box {
    display: flex;
    flex-direction: column;
}

.recovery-pass-hurl {
    margin-bottom: 16px;
    padding: 8px;
    height: 96px;
}

.recovery-url {
    font-size: 10pt;
    cursor: pointer;
    color: var(--text-no-hover-color);
}

.recovery-url:hover {
    color: var(--text-color);
}

.capcha-container {
    padding: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/* ----------------------------------------------
* Generated by Animista on 2025-2-15 20:8:9
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/

@-webkit-keyframes shake-horizontal {
0%,
100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
10%,
30%,
50%,
70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}
20%,
40%,
60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}
80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
}
90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
}
}
@keyframes shake-horizontal {
0%,
100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
10%,
30%,
50%,
70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}
20%,
40%,
60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}
80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
}
90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
}
}


.scale-up-center {
    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
* Generated by Animista on 2025-2-15 20:8:9
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-center {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes scale-up-center {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
