@import 'base';

#user-setup{
    height: 100vh;
    background-color: @dark-purple;//@barely-not-white;
    background: url("../img/bg-tile-steps.png") @dark-purple;
    background-repeat: repeat;

    // This allows the background to expand to fit to content
    display:block;
    overflow:auto;

    main {
        height: 100%;
    }

    .card{
        background-color: @dark-white;
        // border-top: 5px @purple solid;
        margin-top: auto;

        .logo-img {
            height: 150px;
            width: 150px;
            background: url("../img/logo-civiwiki-tree-white.svg") @purple;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            text-align: center;
            border-radius: 10px;

            margin: 20px auto 20px auto;
        }
        .card-content{
            background-color: @white;
            padding-left:50px;
            padding-right: 50px;
            .step-title {
                margin-bottom:10px;
            }
        }
        .card-action {
            .help-text{
                margin-right: 5px;
                font-size: .8em;
                &.invalid {
                    color:@light-gray;
                }
                &.valid {
                    color:@dark-blue;
                }
            }
        }
        .profile-image-preview  {
            margin-top: 10px;
            margin-bottom: 10px;

            .profile-image-label {
                margin-bottom: 10px;
                .label-text{
                    color:@lightish-gray;
                }
            }
            .profile-image{
                .big-image-cropper{
                    border: 5px solid @white;
                    width: 171px;
                    height: 171px;
                    overflow: hidden;
                    border-radius: 50%;
                    img.preview-image  {
                        width: 100%;
                        height: 100%;
                    }
                }
                .loading {
                    width: 100%;
                    height: 100%;
                    line-height: 187px;
                    text-align: center;
                }
                .placeholder {
                    width: 100%;
                    height: 100%;
                    line-height: 171px;
                    // background-color: @light-purple;
                    background-color: @dark-white;
                    text-align: center;
                    .placeholder-text {
                        display: inline-block;
                        vertical-align: middle;
                        line-height: normal;
                        font-size: 24px;
                        font-weight: 700;
                        color: @white;
                    }
                }
            }
        }

        #profile_image_form {
            padding-left: 25px;
            padding-right: 25px;
            .upload-image {
                margin-left: 2.5%;
                padding: 0 5px 0 5px;
                width: 70%;
            }
            .cancel-image {
                text-align: center;
                width: 25%;
                margin-left: 2.5%;
                padding: 0 5px 0 5px;
                background-color: @dark-gray;
                &:hover {
                    background-color: lighten(@dark-gray, 10%);
                }

            }
            .profile-image-pick {
                line-height: 2.8rem;
                width: 100%;
                .choose-image-text {
                    font-size: .8em;
                }

                i {
                    margin-right: 5px;
                }
            }
        }

        .input-area {
            .row {
                margin-bottom: 5px;
            }
            .text-input {
                #about-me {
                    padding-top: 10px;
                    padding-bottom: 10px;
                    margin-bottom: 2px;
                    max-height: 200px;
                }
            }
        }
        .info-text {
            margin-bottom: 15px;
            color: @gray;
            font-weight: 300;
            font-size: 14px;
        }

        #location {
            .input-field, #autocomplete {
                @media only screen and (max-width: 600px) {
                    width: 200px;
                }
                width: 350px;
            }

            .map-wrapper {
                .map-overlay {
                    position: relative;
                    .progress {
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: 0 auto 0 auto;
                        width: 350px;
                        @media only screen and (max-width: 600px) {
                            width: 200px;
                        }
                        z-index: 2;

                    }
                }
                #map {
                    width: 350px;
                    height: 250px;
                    @media only screen and (max-width: 600px) {
                        width: 200px;
                        height: 200px;
                    }
                    margin-left: auto;
                    margin-right: auto;
                    border: solid 1px @dark-white;
                    z-index: 1;
                }
            }
            .rep-title{
                margin-top: 20px;
            }
            #rep-text {
                margin: 20px 0 20px 0;
            }
            #rep-list {
                margin-top: 15px;
                .rep {
                    margin: 5px;
                }
            }
        }

    }
}



// Utils  // -------------------------------------------------------------------
.btn {
    background-color: @dark-blue;
    &:hover {
        background-color: lighten(@dark-blue, 10%);
    }
}

.accent-line {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    border-bottom: 3px solid @dark-white;
}
