.normal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content {
    flex: 1;
    display: flex;
}

.login-bg {
    width: 50%;
    height:100vh;
    overflow: hidden;
}

.login-container {
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    & > div {
        display: flex;
        justify-content: center;
        h1 {
            text-align: center;
            margin-bottom: 50px;
            font-size: 30px;
            font-weight: 300;
            color: #4e5a64;
        }
        form {
            :global(.ant-form-item) {
                margin: 0 10px;
            }
            input[type="text"],
            input[type="password"] {
                padding: 10px;
                border: 0;
                border-bottom: 1px solid #a0a9b4;
                color: #868e97;
                font-size: 14px;
                margin-bottom: 30px;
                border-radius: 0;
                box-shadow: none;
                &:focus {
                    border-bottom: 1px solid #444;
                    color: #444;
                    box-shadow: none;
                }
            }
            button {
                float: right;
                margin-right: 10px;
                background-color: #32c5d2;
                border-color: #32c5d2;
                border-radius: 0;
            }
        }
    }
}


:global(.fade-enter) {
    opacity: 0;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
    animation-play-state: paused;
    &:global(.fade-enter-active) {
        animation-name: fadeIn;
        animation-play-state: running;
    }
}

:global(.fade-appear) {
    opacity: 0;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
    animation-play-state: paused;
    &:global(.fade-appear-active) {
        animation-name: fadeIn;
        animation-play-state: running;
    }
}

:global(.fade-leave) {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
    animation-play-state: paused;
    &:global(.fade-leave-active) {
        animation-name: fadeOut;
        animation-play-state: running;
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
