.login {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    @extend %flexCenterCenter;
    background: rgba($black, 0.7);
    @include size(100vw,100vh);
    pointer-events: all;
    z-index: 1000000;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    &__box {
        display: block;
        background: $grey;
        padding: 30px 80px;
        .main-title {
            font-size: 1.7em;
            text-align: center;
        }
        .register {
            display: block;
            width: 100%;
            text-align: center;
            a { color: $red; }
        }
    }
}

.login-form {
    width: 350px;
    margin: 50px 0;
    input { background: $white; }
    .checkboxes {
        display: flex;
        align-items: center;
        margin: 30px 0;
        &-box {
            display: flex;
            align-items: center;
        }
        .form-check {
            position: relative;
            label {
                position: relative;
                margin-right: 30px;
                padding-left: 30px;
                input[type="radio"] {
                    position: absolute;
                    top: 50%;
                    left: 5px;
                    transform: translateY(-50%);
                }
                .radio-custom {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    display: block;
                    @include size(20px,20px);
                    background: $white;
                    border-radius: 100%;
                    transform: translateY(-50%);
                    &:after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: block;
                        background: $red;
                        @include size(10px,10px);
                        border-radius: 100%;
                        transform: translate(-50%,-50%) scale(0);
                        transition: 180ms linear;
                    }
                }
                & input:checked ~ .radio-custom {
                    &:after { transform: translate(-50%,-50%) scale(1); }
                }
            }
        }
    }
    .btn {
        display: block;
        width: 100%;
    }
}

#login {
    padding-bottom: 0;
    .login-area {
        position: relative;
        height: 100%;
        padding-top: 0;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            background: rgba($white, 0.8);
            @include size(100%,100%);
            z-index: 0;
        }
        .login-col {
            display: flex;
            flex-direction: column;
            background: rgba($black, 0.4);
            height: 100%;
            position: relative;
            padding: 4vh 50px;
            z-index: 1;
        }
        .login-block {
            margin-bottom: 50px;
            &:last-of-type { margin-bottom: 0; }
            .main-title {
                width: 100%;
                text-align: center;
            }
            &.social {
                display: flex;
                flex-direction: column;
                text-align: center;
                .btn {
                    padding: 5px 0;
                    width: 60%;
                    margin: 10px auto;
                }
            }
            .login-form {
                width: 100%;
                input { text-align: center; }
            }
        }
    }
}