@import "../../../Base/Content/sass/bootstrap/variables";
@import "../../../Base/Content/sass/compass";

@import "../../Branding/Content/Partials/Variables";

.bootstrap-wrapper {

    &.wizdom-profileProgress {

        &.wt-small {
            /*background-color:red !important;*/
        }

        .wizdom-profileProgress-row {
            display: table;
            table-layout: fixed;
            width: 100%;
        }

        .wizdom-profileProgress-imgColumn {
            display: table-cell;
            text-align: center;
            width: $wizdom-avatar-medium-dims;

            img {
                @include border-radius($wizdom-avatar-medium-radius);
                max-width: $wizdom-avatar-medium-dims;
                max-height: $wizdom-avatar-medium-dims;
                /*border: solid 3px #bbb;*/
            }
        }

        .wizdom-profileProgress-textColumn {
            display: table-cell;
            -ms-word-wrap: break-word;
            word-wrap: break-word;
            padding-left: 20px;
            text-align: center;
            vertical-align: middle;

            h4 {
                margin: 0;
            }

            .name {
                font-size: $wizdom-big-text;
            }

            .email {
                font-style: italic;
            }
        }

        .wizdom-profileProgress-bar-container {
            background-color: #eee;
            @include border-radius(10px);
            display: inline-block;
            margin-top: 10px;
            width: 85%;
            text-align: left;

            .wizdom-profileProgress-colored-bar {
                background-color: $brand-danger;

                @include border-radius(10px);
                @include single-transition(all,0.5, ease);
                color: white;
                text-align: center;
                font-weight: bold;
                white-space:nowrap;

                &.zero {
                    background-color: transparent;
                    color:$wizdom-button-default-text-color;
                }

                &.mid {
                    background-color: $brand-warning;
                }

                &.high {
                    background-color: $brand-success;
                }
            }
        }

        .wizdom-profileProgress-main {
            padding-bottom: 15px;
        }

        .wizdom-profileProgress-editProfile {
            margin-bottom: $wizdom-webpart-fullWidth-bottom;

            .wt-chromeNone &, .wt-chromeTitleOnly & {
                margin-bottom: 0;
            }

            .row {
                background-color: #f1f1f1;
                text-align: center;
                padding: 20px;
                border-top: solid 1px #e4e4e4;
                @include border-bottom-radius($wizdom-border-radius);


                .wt-chromeNone &, .wt-chromeTitleOnly & {
                    background: none;
                }
            }
        }
    }
}
