documize/gui/app/styles/view/onboard.scss

.onboarding-container {
    width: 100%;
    text-align: left;
    color: $color-off-black;
	letter-spacing: 1px;
	margin: 50px 0;

    .stage-1
    {
        display: block;

        .account-name-preview
        {
            color: #fff;
            background: #b9b9b9 !important;
        }

        img
        {
            // margin: 100px 0 0 200px;
        }
    }

    .stage-2
    {
        display: none;

        .account-name-preview
        {
            color: #fff;
            background: rgba(27,117,187,1);
            background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
            background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
            background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
            background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
            background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );
        }

        img
        {
            // margin: 100px 0 0 200px;
        }
    }

    .note
    {
        font-size: 0.9rem;;
        font-style: italic;
        color: $color-stroke;
    }

    .mismatch
    {
        display: none;
        color: $color-red;
        font-weight: 700;
    }

    .stage-3
    {
        @extend .stage-2;

        img
        {
            margin: 100px 0 0 200px;
        }

        #spinner-1
        {
            margin: 140px 0 0 170px;
        }
    }

    .stage-4
    {
        @extend .stage-3;

        a
        {
            display: block;
            font-size: 20px;
            text-decoration: underline;

            &:hover
            {
                text-decoration: none;
            }
        }
    }

    .stage-5
    {
        @extend .stage-3;

        #spinner-1
        {
            margin: 140px 0 0 170px;
        }
    }

    .account-name-preview
    {
        color: #fff;
        height: 55px;
        width: 100%;
        font-family: Arial;
        opacity: 0.8;
        text-align: left;
        background: rgba(27,117,187,1);
        background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
        background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
        background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
        background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
        background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );

        .title
        {
            display: inline-block;
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 400;
            margin: 18px 0 0 20px;
            overflow: hidden;
            white-space: nowrap;
            width: 80%;
        }

        .nav-icon
        {
            display: inline-block;
            background-image: url(img/onboard/nav-icons.png);
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            vertical-align: top;
            z-index: 1;
            background-position: 0 -75px;
            margin: 15px 0 0 20px;
        }
    }

    .sidebar
    {
        .logo
        {
            height: 62px;
            margin-bottom: 15px;
            margin-top: 20px;
        }

        h2
        {
            font-size: 2rem;;
            color: $color-primary;
            margin-bottom: 30px;
        }

        p
        {
            font-size: 1.3rem;
            color: $color-primary;
        }

        p.note
        {
             font-size: 0.9rem;
        }
    }

    .rightbar
    {
        @extend .absolute-center;
		height: 400px;
        max-width: 500px;
        background-color: #f6f9fc;
        position: relative;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 6px 20px 0 rgba(30,71,101,.1);
    }

	input[type='email'], input[type='text'], input[type='password'] {
		background-color: transparent;
	}

    // input[type='submit']
    // {
    //     padding: 10px 15px;
    //     background: #12A936;
    //     border: 0;
    //     color: $color-off-white;
    //     border-radius: 3px;
    //     font-weight: 500;
    //     font-size: 16px;
    //     -webkit-appearance: none;
    //     vertical-align: bottom;
    //     height: auto;
    //     width: auto;
    //     display: inline-block;
    //     margin: 20px 0 0 0;
    //     letter-spacing: 0.7px;
    //     @include ease-in();
    //     float: right;
    //     @extend .no-outline;
    //     @extend .no-select;
	//
    //     &:hover
    //     {
    //         background: lighten(#12A936, 4%);
    //     }
    // }
	//
    // input[type='email'], input[type='text'], input[type='password']
    // {
    //     padding: 5px 15px;
    //     background: white;
    //     border: 1px solid #e2e2e2;
    //     @include border-radius(3px);
    //     color: $color-off-black;
    //     font-weight: bold;
    //     font-size: 16px;
    //     -webkit-appearance: none;
    //     vertical-align: bottom;
    //     width: 90%;
    //     display: block;
    //     margin: 20px 0 10px 0;
    //     letter-spacing: 1px;
    // }

    /*********************************************/
    /* Spinner */
    /*********************************************/
    #spinner-1, #spinner-2
    {
        display: none;
    }

    .sk-spinner-wave.sk-spinner
    {
        margin: 0 auto;
        width: 170px;
        height: 30px;
        text-align: center;
        font-size: 10px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .sk-spinner-wave div
    {
        background-color: #12A936;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
        animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
    }

    .sk-spinner-wave .sk-rect2
    {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-spinner-wave .sk-rect3
    {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-spinner-wave .sk-rect4
    {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-spinner-wave .sk-rect5
    {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-waveStretchDelay
    {
        0%, 40%, 100%
        {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20%
        {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }

    @keyframes sk-waveStretchDelay
    {
        0%, 40%, 100%
        {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20%
        {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }

}