.login-wrap{
    height: 100%;
    @include flex-layout(flex, center, center);
        .login-btn {
            width: 100%;
        }

        .icon-label {
            padding-left: 2rem;
            background-position: left center;
            background-repeat: no-repeat;


            &.lbtn {
                padding-left: 4rem;
                background-image: url(#{$url}/content/ico_login_btn.svg);
            }
        }

        .btn.primary.login-btn {
            background-color: #5760CF;
            border: 1px solid #5760CF;
        }

        .links{
            a{
                font-size: 1.4rem;
                font-weight: 600;
                padding: 0 2rem;
                border-left: 1px solid #dcdcdc;
                &:first-child{
                    border-left: none;
                }
            }
            
        }
}


.find-wrap{
    height: 100%;
    @include flex-layout(flex, center, center, column);
        .find-title{
            font-size: 2.2rem;
            font-weight: 700;
        }

        .find-methods{
            padding: 2rem;
            border: 1px solid #dcdcdc;
            border-radius: 1rem;
            margin-bottom: 3rem;
            >div{
                padding: 1rem;
                border-bottom: 1px solid #dcdcdc;
                &:last-child{
                    border-bottom: none;
                }   
                label{
                    font-weight:700;
                    min-width: 150px;
                }
            }
        }

        .auth-form{
            padding: 1rem 0;
        }

}


.join-wrap{
    height: 100%;
    @include flex-layout(flex, center, center, column);

    .login-box.join-box{
        .tbl-wrap{
            margin-bottom: 2rem;
            border-radius: 1rem;
            border: 1px solid #dcdcdc;
            .tbl.data {
                tbody {
                    tr:first-child{
                        th:first-child {
                        border-radius: 1rem 0 0 0;
                        }
                        td{
                             border-radius: 0 1rem 0 0;
                        }
                    }
                    tr:last-child {
                        
                        th:first-child {
                            border-radius: 0 0 0 1rem;
                        }

                        th,
                        td {
                            border-bottom: 0;
                        }
                        td{
                             border-radius: 0 0 1rem 0;
                        }
                    }
                }
            }
            &.last-table{
                .tbl.data{
                    tbody{
                        tr{

                            td{
                                border-radius: 0 1rem 1rem 0;
                            }
                        }
                    }
                }
            }
        }

    }
}

.login-box{
    width: 700px;
    background-color: #ffffff;
    border-radius: 3rem;
    padding: 5rem;
    // &.join-box{
    //     width: 1500px;
    // }
}

.login-logo{
    text-align: center;
    margin-bottom: 3rem;
}

.error-message{
    background-color: #ffeded;
    border: 1px solid #ff0000;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 1rem;
    border-radius: 1rem;
}

.warning{
    font-size: 1.3rem;
    color: #ff0000;
    margin-bottom: 1rem;
}

.netx-btn{
    width: 100%;
    background-color: #5760CF;
    border: 1px solid #5760CF;
}

.black{
    background-color: #333333;
    border: 1px solid #333333;
}