@charset "UTF-8";

:root {
    --form-height: 550px;
    --form-width: 900px;
    /*  Sea Green */
    --left-color: #333;
    /*  Light Blue  */
    --right-color: #333;
    --btn-color: rgba(247, 103, 7, 0.8);
}

body,
html {
    margin: 0;
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: 0.5px;
}

.login-logout-section {
    width: 100vw;
    height: 100vh;
    background-color: rgba(80, 79, 75, 0.2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form .sign-in button, .login-password-tab-inner .login-form-content button {
    padding: 10px 30px;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 18px;
    background-color: var(--btn-color);
    color: #f6f5f7;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 15px;
}

    .form .sign-in button:hover, .login-password-tab-inner .login-form-content button:hover {
        background-color: #f76707;
    }

.login-logout-container {
    width: var(--form-width);
    height: var(--form-height);
    position: relative;
    margin: auto;
    -webkit-box-shadow: 2px 10px 40px rgba(22, 20, 19, 0.4);
    box-shadow: 2px 10px 40px rgba(22, 20, 19, 0.4);
    border-radius: 10px;
    background-color: #f6f5f7;
}

/* 
----------------------
Overlay
----------------------
*/
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background-image: url("../img/bg-loginout2.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    color: white;
    /*裁切位置*/
    /*     clip: rect(0, 385px, var(--form-height), 0); */
    /*   clip-path: inset(0px calc(100% - 385px) 0px 0px); */
    -webkit-clip-path: inset(0px 0px 0px calc(100% - 385px));
    clip-path: inset(0px 0px 0px calc(100% - 385px));
}

.open-sign-up {
    -webkit-animation: slideleft 1s linear forwards;
    animation: slideleft 1s linear forwards;
}

.open-sign-in {
    -webkit-animation: slideright 1s linear forwards;
    animation: slideright 1s linear forwards;
}

.overlay .sign-in,
.overlay .sign-up {
    /*  Width is 385px - padding  */
    --padding: 50px;
    width: calc(385px - var(--padding) * 2);
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0px var(--padding);
    text-align: center;
}

/* 內部結構 */
.overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/*影片處理*/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.overlay-text-left-animation {
    -webkit-animation: text-slide-in-left 1s linear;
    animation: text-slide-in-left 1s linear;
}

.overlay-text-left-animation-out {
    -webkit-animation: text-slide-out-left 1s linear;
    animation: text-slide-out-left 1s linear;
}

.overlay-text-right-animation {
    -webkit-animation: text-slide-in-right 1s linear;
    animation: text-slide-in-right 1s linear;
}

.overlay-text-right-animation-out {
    -webkit-animation: text-slide-out-right 1s linear;
    animation: text-slide-out-right 1s linear;
}

.overlay h1 {
    margin: 0px 5px;
    font-size: 2.1rem;
}

.overlay p {
    margin: 20px 0px 30px;
    font-weight: 200;
}

.overlay button {
    margin-bottom: 30px;
}

/* 
------------------------
Buttons
------------------------
*/
.switch-button,
.control-button {
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
    height: 40px;
    font-size: 18px;
    text-transform: uppercase;
    background: none;
    border-radius: 5px;
    color: white;
}

    .switch-button:hover,
    .control-button:hover {
        background-color: var(--btn-color);
        border: var(--btn-color);
    }

.switch-button {
    border: 2px solid;
}

.control-button {
    border: none;
    margin-top: 15px;
}

    .switch-button:focus,
    .control-button:focus {
        outline: none;
    }

    .control-button.up {
        background-color: var(--left-color);
    }

    .control-button.in {
        background-color: var(--right-color);
    }

/* 
--------------------------
Forms
--------------------------
*/
.form {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 10px;
}

    .form .sign-in,
    .form .sign-up {
        --padding: 50px;
        position: absolute;
        /*  Width is 100% - 385px - padding  */
        /*   --form-width: 900px; */
        width: calc(var(--form-width) - 385px - var(--padding) * 2);
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0px var(--padding);
        text-align: center;
    }

    .form .sign-in {
        /*   display: none; */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .form .sign-out {
        display: none;
    }

    .form .sign-in {
        left: 0;
    }

    .form .sign-up {
        right: 0;
    }

.form-right-slide-in {
    -webkit-animation: form-slide-in-right 1s;
    animation: form-slide-in-right 1s;
}

.form-right-slide-out {
    -webkit-animation: form-slide-out-right 1s;
    animation: form-slide-out-right 1s;
}

.form-left-slide-in {
    -webkit-animation: form-slide-in-left 1s;
    animation: form-slide-in-left 1s;
}

.form-left-slide-out {
    -webkit-animation: form-slide-out-left 1s;
    animation: form-slide-out-left 1s;
}

/*  */
/* 表單元件 */
/*  */
/* logo */
.login-from-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
}

    .login-from-title h1 {
        font-size: 1.7rem;
    }
        .login-from-title img {
        height: 90px;
    }

.form .sign-in button.renew {
    background-color: transparent;
    color: #333;
    padding: 10px 0px;
    font-size: 1.8rem;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0;
}

.form .sign-in button.renew:hover {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
}

.form .sign-in .verification-area {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 295px;
}

    /*.form .sign-in .verification-area input {
        width: 112.2px;
        margin-left: 0;
        margin-right: 0;
    }*/

    .form .sign-in .verification-area img {
        height: 40px;
        width: 119px;
    }

    .form .sign-in .verification-area .renew {
        margin-top: 0;
    }

.form .sign-in h1 {
    color: var(--right-color);
    margin: 0;
}

.form .sign-up h1 {
    color: var(--left-color);
    margin: 0;
}

.sign-in-form input,
.sign-up-form input {
    /*margin: 12px;
    font-size: 14px;
    padding: 15px;
    width: 260px;
    font-weight: 300;
    border: none;
    background-color: rgba(199, 197, 197, 0.4);
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: 1.5px;
    padding-left: 20px;
    border-radius: 5px;*/
}

#sign-in-form input::-webkit-input-placeholder {
    letter-spacing: 1px;
}

#sign-in-form input:-ms-input-placeholder {
    letter-spacing: 1px;
}

#sign-in-form input:-ms-input-placeholder {
    letter-spacing: 1px;
}

#sign-in-form input:placeholder {
    letter-spacing: 1px;
}

.forgot-password {
    font-size: 12px;
    display: inline-block;
    border-bottom: 2px solid #efebeb;
    padding-bottom: 3px;
}

    .forgot-password:hover {
        cursor: pointer;
    }

.forget-password-content {
    padding-top: 1.5rem;
}

    .forget-password-content p {
        background-color: #fff;
        border-radius: 5px;
        padding: 0.5rem 0.8rem;
        font-weight: 500;
        font-size: 1.5rem;
        text-transform: capitalize;
        line-height: 2.5rem;
        margin-bottom: 3rem;
    }

        .forget-password-content p .forgot-password-span {
            border-bottom: 1.5px solid #000;
        }

.login-password-btn-group {
    margin-top: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .login-password-btn-group .login-password-btn {
        text-decoration: none;
        color: #333;
        font-size: 2rem;
        font-weight: 700;
        padding-bottom: 0.2rem;
    }

        .login-password-btn-group .login-password-btn.active {
            border-bottom: 4px solid rgba(247, 103, 7, 0.8);
        }

.login-password-tab-contnet {
    position: relative;
}

    .login-password-tab-contnet input:first-child {
        margin-top: 2.5rem;
    }

.login-password-tab-inner {
    height: 400px;
}

    .login-password-tab-inner .login-form-content {
        height: 400px;
    }

        .login-password-tab-inner .login-form-content button {
            position: absolute;
            bottom: 0px;
            left: 50%;
            -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
        }

/* 
---------------------------
Animation
---------------------------
*/
@-webkit-keyframes slideright {
    /*   --form-height:550px;
  --form-width: 900px; */
    0% {
        /*     clip: rect(0, 385px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 385px) 0px 0px);
        clip-path: inset(0px calc(100% - 385px) 0px 0px);
    }

    30% {
        /*     clip: rect(0, 480px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 500px) 0px 0px);
        clip-path: inset(0px calc(100% - 500px) 0px 0px);
    }
    /*  we want the width to be slightly larger here  */
    50% {
        /*clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2)); */
        -webkit-clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
        clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
    }

    80% {
        /* clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 480px));
        clip-path: inset(0px 0px 0px calc(100% - 480px));
    }

    100% {
        /* clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 385px));
        clip-path: inset(0px 0px 0px calc(100% - 385px));
    }
}

@keyframes slideright {
    /*   --form-height:550px;
  --form-width: 900px; */
    0% {
        /*     clip: rect(0, 385px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 385px) 0px 0px);
        clip-path: inset(0px calc(100% - 385px) 0px 0px);
    }

    30% {
        /*     clip: rect(0, 480px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 500px) 0px 0px);
        clip-path: inset(0px calc(100% - 500px) 0px 0px);
    }
    /*  we want the width to be slightly larger here  */
    50% {
        /*clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2)); */
        -webkit-clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
        clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
    }

    80% {
        /* clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 480px));
        clip-path: inset(0px 0px 0px calc(100% - 480px));
    }

    100% {
        /* clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 385px));
        clip-path: inset(0px 0px 0px calc(100% - 385px));
    }
}

@-webkit-keyframes slideleft {
    /*   --form-height:550px;
  --form-width: 900px; */
    100% {
        /*     clip: rect(0, 385px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 385px) 0px 0px);
        clip-path: inset(0px calc(100% - 385px) 0px 0px);
    }

    70% {
        /*     clip: rect(0, 480px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 420px) 0px 0px);
        clip-path: inset(0px calc(100% - 420px) 0px 0px);
    }
    /*  we want the width to be slightly larger here  */
    50% {
        /*     clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2)); */
        -webkit-clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
        clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
    }

    30% {
        /*   clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 480px));
        clip-path: inset(0px 0px 0px calc(100% - 480px));
    }

    0% {
        /*   clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 385px));
        clip-path: inset(0px 0px 0px calc(100% - 385px));
    }
}

@keyframes slideleft {
    /*   --form-height:550px;
  --form-width: 900px; */
    100% {
        /*     clip: rect(0, 385px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 385px) 0px 0px);
        clip-path: inset(0px calc(100% - 385px) 0px 0px);
    }

    70% {
        /*     clip: rect(0, 480px, var(--form-height), 0); */
        -webkit-clip-path: inset(0px calc(100% - 420px) 0px 0px);
        clip-path: inset(0px calc(100% - 420px) 0px 0px);
    }
    /*  we want the width to be slightly larger here  */
    50% {
        /*     clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2)); */
        -webkit-clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
        clip-path: inset(0px calc(var(--form-width) / 2 - 480px / 2) 0px calc(var(--form-width) / 2 - 480px / 2));
    }

    30% {
        /*   clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 480px));
        clip-path: inset(0px 0px 0px calc(100% - 480px));
    }

    0% {
        /*   clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px)); */
        -webkit-clip-path: inset(0px 0px 0px calc(100% - 385px));
        clip-path: inset(0px 0px 0px calc(100% - 385px));
    }
}

@-webkit-keyframes text-slide-in-left {
    0% {
        padding-left: 20px;
    }

    100% {
        padding-left: 50px;
    }
}

@keyframes text-slide-in-left {
    0% {
        padding-left: 20px;
    }

    100% {
        padding-left: 50px;
    }
}

@-webkit-keyframes text-slide-in-right {
    0% {
        padding-right: 20px;
    }

    100% {
        padding-right: 50px;
    }
}

@keyframes text-slide-in-right {
    0% {
        padding-right: 20px;
    }

    100% {
        padding-right: 50px;
    }
}

@-webkit-keyframes text-slide-out-left {
    0% {
        padding-left: 50px;
    }

    100% {
        padding-left: 20px;
    }
}

@keyframes text-slide-out-left {
    0% {
        padding-left: 50px;
    }

    100% {
        padding-left: 20px;
    }
}

@-webkit-keyframes text-slide-out-right {
    0% {
        padding-right: 50px;
    }

    100% {
        padding-right: 20px;
    }
}

@keyframes text-slide-out-right {
    0% {
        padding-right: 50px;
    }

    100% {
        padding-right: 20px;
    }
}

@-webkit-keyframes form-slide-in-right {
    0% {
        padding-right: 100px;
    }

    100% {
        padding-right: 50px;
    }
}

@keyframes form-slide-in-right {
    0% {
        padding-right: 100px;
    }

    100% {
        padding-right: 50px;
    }
}

@-webkit-keyframes form-slide-in-left {
    0% {
        padding-left: 100px;
    }

    100% {
        padding-left: 50px;
    }
}

@keyframes form-slide-in-left {
    0% {
        padding-left: 100px;
    }

    100% {
        padding-left: 50px;
    }
}

@-webkit-keyframes form-slide-out-right {
    0% {
        padding-right: 50px;
    }

    100% {
        padding-right: 80px;
    }
}

@keyframes form-slide-out-right {
    0% {
        padding-right: 50px;
    }

    100% {
        padding-right: 80px;
    }
}

@-webkit-keyframes form-slide-out-left {
    0% {
        padding-left: 50px;
    }

    100% {
        padding-left: 80px;
    }
}

@keyframes form-slide-out-left {
    0% {
        padding-left: 50px;
    }

    100% {
        padding-left: 80px;
    }
}
/*# sourceMappingURL=login.css.map */