@charset "UTF-8";

.input input, .input label {
    display: block;
    font-family: Arial,sans-serif;
    width: 100%
}

.input {
    margin-top: .3125rem
}

    .input label {
        height: 1.25rem;
        color: #d5d5d5;
        margin-bottom: .25rem;
        font-weight: 500;
        font-size: .875rem;
        line-height: 1.5625rem
    }

        .input label span {
            color: #ff6b6b;
            margin-right: .25rem;
            font-weight: 700
        }

    .input input {
        height: 2.1875rem;
        font-size: 162x;
        font-weight: 400;
        letter-spacing: normal;
        color: #f4f6f7;
        background: rgba(255,255,255,.1);
        border: .0625rem solid rgba(255,255,255,.2);
        border-radius: .3125rem;
        padding: 0 1rem;
        box-sizing: border-box;
        transition: .3s
    }

        .input input::placeholder {
            color: #d5d5d5;
            opacity: .7
        }

        .input input:focus {
            outline: 0;
            border-color: #3296f2;
            background: rgba(255,255,255,.15);
            box-shadow: 0 0 0 .1875rem rgba(50,150,242,.1)
        }

        .input input:hover {
            border-color: rgba(255,255,255,.3)
        }

        .input input:required {
            border-left: .0625rem solid #3296f2
        }

        .input input:invalid {
            border-color: #ff6b6b
        }

            .input input:invalid:focus {
                border-color: #ff6b6b;
                box-shadow: 0 0 0 .1875rem rgba(255,107,107,.1)
            }

        .input input:valid {
            border-color: #51cf66
        }

            .input input:valid:focus {
                border-color: #51cf66;
                box-shadow: 0 0 0 .1875rem rgba(81,207,102,.1)
            }

    .input img {
        width: 1.5rem;
        height: 1.5rem
    }

    .input.error input {
        border-color: #ff6b6b
    }

        .input.error input:focus {
            border-color: #ff6b6b;
            box-shadow: 0 0 0 .1875rem rgba(255,107,107,.1)
        }

    .input.error .error-message {
        color: #ff6b6b;
        font-size: .875rem;
        margin-top: .5rem
    }

    .input.success input {
        border-color: #51cf66
    }

        .input.success input:focus {
            border-color: #51cf66;
            box-shadow: 0 0 0 .1875rem rgba(81,207,102,.1)
        }

    .input.success .success-message {
        color: #51cf66;
        font-size: .875rem;
        margin-top: .5rem
    }

    .input.with-icon {
        position: relative
    }

        .input.with-icon input {
            padding-left: 3.125rem
        }

        .input.with-icon .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1.25rem;
            height: 1.25rem;
            color: #d5d5d5
        }

    .input .input-description {
        color: #8daee0;
        font-size: .875rem;
        margin-top: .5rem
    }

    .input.input-small input {
        width: 100%;
        height: 2.25rem;
        font-size: .875rem
    }

    .input.input-large input {
        width: 100%;
        height: 3.5rem;
        font-size: 1.125rem
    }

    .input.disabled {
        opacity: .6;
        pointer-events: none
    }

        .input.disabled input {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.1)
        }

@media screen and (max-width:768px) {
    .sub button, .tag button {
        font-family: Arial;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: .27px;
        color: #fff
    }

    body {
        background: #120505fa;
        height: 150vh;
    }

    .logo {
        margin: 3.25rem auto 3.25rem auto;
        background: url(../images/logo.png) center center/14.175rem 4.725rem;
        width: 14.175rem;
        height: 4.725rem;
        cursor: pointer
    }

    .tag {
        margin: .9375rem 2.25rem auto
    }

        .tag button {
            line-height: 2.75rem
        }

        .tag .is-active {
            color: #3296f2;
            border-bottom: .125rem solid #3296f2
        }

    .input-area {
        width: 90vw;
        margin: 1.375rem auto auto
    }

    .errorMsg {
        text-align: center;
        line-height: 2rem;
        color: red
    }

    .sub {
        margin: 1.25rem auto auto;
        width: 10.625rem;
        height: 3.75rem
    }

        .sub button {
            display: block;
            width: 10.66125rem;
            height: 3.75rem;
            border-radius: .625rem;
            line-height: 3.75rem;
            text-align: center;
            background: linear-gradient(90deg, #FF5733, #FFC300);
        }

            .sub button:hover {
                border-radius: .625rem;
                background: #FFC300
            }

    .left {
        display: none
    }
}

@media screen and (min-width:768px) {
    .login-warpper .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .9375rem
    }

        .login-warpper .right .logo {
            display: none
        }

        .login-warpper .right .tag {
            font-family: Arial;
            font-size: 1.75rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #f4f6f7
        }

            .login-warpper .right .tag button {
                cursor: pointer
            }

            .login-warpper .right .tag .is-active {
                color: #1d2087
            }

        .login-warpper .right .note {
            font-family: Arial;
            font-size: .9375rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #d8d8d8
        }

        .login-warpper .right .email::before, .login-warpper .right .errorMsg, .login-warpper .right .password::before {
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: normal;
            font-family: Arial
        }

        .login-warpper .right .select {
            width: 27rem;
            height: 3.75rem;
            background-color: #03315e;
            padding-left: 1.3125rem;
            padding-right: 1.3125rem;
            display: flex;
            justify-content: center;
            align-items: center
        }

            .login-warpper .right .select label {
                flex: 1;
                font-family: Arial;
                font-size: 1.3125rem;
                font-weight: 400;
                letter-spacing: normal;
                color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center
            }

        .login-warpper .right .email::before {
            content: "Email";
            color: #404b7c;
            display: block;
            margin-bottom: .9375rem
        }

        .login-warpper .right .password::before {
            content: "Passwrod";
            color: #404b7c;
            display: block;
            margin-bottom: .9375rem
        }

        .login-warpper .right .errorMsg {
            color: red
        }

        .login-warpper .right .forgot-password {
            cursor: pointer;
            width: 27rem;
            font-family: Arial;
            font-size: .875rem;
            font-weight: 400;
            letter-spacing: normal;
            color: #404b7c;
            text-align: right
        }

        .login-warpper .right .sub button {
            display: block;
            width: 10.66125rem;
            height: 3.75rem;
            border-radius: .625rem;
            font-family: Arial;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 3.75rem;
            text-align: center;
            letter-spacing: .27px;
            color: #fff;
            background: linear-gradient(90deg, #FF5733, #FFC300);
            margin-bottom: 20px;
        }

        .login-warpper .right .signup, .login-warpper .right .signup a {
            font-family: Arial;
            font-size: .9375rem;
            font-weight: 400;
            letter-spacing: normal
        }

        .login-warpper .right .sub button:hover {
            border-radius: .625rem;
            background: #FFC300
        }

        .login-warpper .right .signup {
            margin-top: 1.25rem;
            color: #8daee0
        }

            .login-warpper .right .signup a {
                color: #404b7c
            }

        .login-warpper .right .input-area {
            width: 80%;
            margin: 1.375rem 0 auto
        }
}