@import url("https://fonts.googleapis.com/css?family=Fira+Sans");

html{
    /*background: url(assets/images/login_cover.jpg) no-repeat;*/
    /*background-size: cover;*/

    /* Here's the trick */
    /*background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) , url(./../images/login_cover.jpg) no-repeat;*/
    background: linear-gradient(#141414cf, rgb(0 0 0 / 50%)), url(./../images/login_cover.jpg) no-repeat;
    background-size: cover;

}
body {
    position: relative;
    min-height: 100vh;
    /*background-color: #E1E8EE;*/
    /*display: grid;*/
    /*align-items: center;*/
    justify-content: center;
    font-family: "Fira Sans", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input{
    border: 0;
    outline: none;
    box-shadow: none;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 8px 15px;
    margin: 8px 0px;
    border-bottom: 1px solid #eee;
    width: 100%;
    font-size: 12px;
}
.form-group{
    font-size: small;
    font-weight: 600;
    color: #2a6ea5;
}
.form-group label{
    padding: 2px 15px;
}
.form-structor {
    background-color: #222;
    border-radius: 15px;
    height: 550px;
    width: 350px;
    position: relative;
    overflow: hidden;
    margin: auto;

    &::after {
        content: '';
        opacity: .8;
        position: absolute;
        top: 0;right:0;bottom:0;left:0;
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 500px;
        /*background: linear-gradient(to bottom, #1e3a8a, #1e40af, #24243e);*/
        background: linear-gradient(to top, #9abfe8 0%, #acc1e0 100%);
        /*background: linear-gradient(to bottom, #8279c9, #88cdda, #24243e);*/
        /*background-image: url('https://images.unsplash.com/photo-1503602642458-232111445657?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bf884ad570b50659c5fa2dc2cfb20ecf&auto=format&fit=crop&w=1000&q=100');*/
    }

    .signup {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        width: 65%;
        z-index: 5;
        -webkit-transition: all .3s ease;


        &.slide-up {
            top: 5%;
            -webkit-transform: translate(-50%, 0%);
            -webkit-transition: all .3s ease;
        }

        &.slide-up .form-holder,
        &.slide-up .submit-btn {
            opacity: 0;
            visibility: hidden;
        }

        &.slide-up .form-title {
            font-size: 1em;
            cursor: pointer;
        }

        &.slide-up .form-title span {
            margin-right: 5px;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all .3s ease;
        }

        .form-title {
            color: #fff;
            font-size: 1.7em;
            text-align: center;

            span {
                color: rgba(0,0,0,0.4);
                opacity: 0;
                visibility: hidden;
                -webkit-transition: all .3s ease;
            }
        }

        .form-holder {
            border-radius: 15px;
            background-color: #fff;
            overflow: hidden;
            margin-top: 50px;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all .3s ease;

            .input {
                border: 0;
                outline: none;
                box-shadow: none;
                display: block;
                height: 30px;
                line-height: 30px;
                padding: 8px 15px;
                margin: 8px 0px;
                border-bottom: 0px solid #eee;
                width: 100%;
                font-size: 12px;

                &:last-child {
                    border-bottom: 0;
                }
                &::-webkit-input-placeholder {
                    color: rgba(0,0,0,0.4);
                }
            }
        }

        .submit-btn {
            background-color: rgba(0,0,0,0.4);
            color: rgba(256,256,256,0.7);
            border:0;
            border-radius: 15px;
            display: block;
            margin: 15px auto;
            padding: 5px 45px;
            width: 100%;
            height: 100%;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all .3s ease;

            &:hover {
                transition: all .3s ease;
                background-color: rgba(0,0,0,0.8);
            }
        }
    }

    .login {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 5;
        -webkit-transition: all .3s ease;

        &::before {
            content: '';
            position: absolute;
            left: 50%;
            top: -20px;
            -webkit-transform: translate(-50%, 0);
            background-color: #fff;
            width: 200%;
            height: 250px;
            border-radius: 50%;
            z-index: 4;
            -webkit-transition: all .3s ease;
        }

        .center {
            position: absolute;
            top: calc(50% - 10%);
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            width: 75%;
            z-index: 5;
            -webkit-transition: all .3s ease;

            .form-title {
                color: #000;
                font-size: 1.7em;
                text-align: center;

                span {
                    color: rgba(0,0,0,0.4);
                    opacity: 0;
                    visibility: hidden;
                    -webkit-transition: all .3s ease;
                }
            }

            .form-holder {
                border-radius: 15px;
                background-color: #fff;
                border: 1px solid #eee;
                overflow: hidden;
                padding: 10px;
                /*margin-top: 50px;*/
                opacity: 1;
                visibility: visible;
                -webkit-transition: all .3s ease;

                .input {
                    border: 0;
                    outline: none;
                    box-shadow: none;
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    padding: 8px 15px;
                    background-color: #f0f8ff;
                    /*border-bottom: 1px solid #eee;*/
                    width: 85%;
                    font-size: 12px;

                    &:last-child {
                        border-bottom: 0;
                    }
                    &::-webkit-input-placeholder {
                        color: rgba(0,0,0,0.4);
                    }
                }
            }

            .submit-btn {
                background-color: #6B92A4;
                color: rgb(255 255 255);
                border:0;
                border-radius: 15px;
                display: block;
                margin: 15px auto;
                padding: 5px 45px;
                width: 100%;
                height: 100%;
                font-size: 13px;
                font-weight: bold;
                cursor: pointer;
                opacity: 1;
                visibility: visible;
                -webkit-transition: all .3s ease;

                &:hover {
                    transition: all .3s ease;
                    background-color: rgba(0,0,0,0.8);
                }
            }
        }

        &.slide-up {
            top: 90%;
            -webkit-transition: all .3s ease;
        }

        &.slide-up .center {
            top: 10%;
            -webkit-transform: translate(-50%, 0%);
            -webkit-transition: all .3s ease;
        }

        &.slide-up .form-holder,
        &.slide-up .submit-btn {
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all .3s ease;
        }

        &.slide-up .form-title {
            font-size: 1em;
            margin: 0;
            padding: 0;
            cursor: pointer;
            -webkit-transition: all .3s ease;
        }

        &.slide-up .form-title span {
            margin-right: 5px;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all .3s ease;
        }
    }
}