// Copyright 2010-2012 RethinkDB, all rights reserved.
// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

// Components
@import "bootstrap/modals.less";
@import "bootstrap/tooltip.less";
@import "bootstrap/popovers.less";
@import "bootstrap/dropdowns.less";
@import "bootstrap/forms.less";
@import "bootstrap/navs.less";

// Utility classes
@import "bootstrap/utilities.less"; // Has to be last to override when necessary

@import "lesshat";

@accent: #0597d8;
@sans: 'Open Sans', sans-serif;
@serif: 'Copse', serif;
@monospace: 'Inconsolata', monospace;

// Visualizations (graphs, etc.)
@import "vis.less";

/* 
    ----------------------------------------------------------------------
    Sticky footer and 100% height
        - Uses Adham Dannaway's sticky footer approach (adhamdannaway.com)
    ----------------------------------------------------------------------
*/
html, body {
    height: 100%;
    background: #E5E5E5;
    // fix poor font rendering on OS X webkit
    -webkit-font-smoothing: antialiased;
}
#sticky-wrap { min-height: 100%; }
#main-container {
    padding-bottom: 95px;
}
#footer {
    position: relative;
    margin-top: -95px;
    height: 60px;
    clear: both;
    /* Used to preload the monospace fonts for the data explorer */
    .preload_fonts{
        font-family: @monospace;
    }
}
/* Opera fix */
body:before {
    content:"";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}
.options_background{
    display: none;
    position: absolute;
    width: 100%;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    padding: 0px;
    height: 86px;
    border-bottom: 2px solid #ddd;
}
.options_container_arrow_overlay{
    display: none;
    position: absolute;
    z-index: 201;
    left: 50%;
    top: 51px;
    width: 0; 
    height: 0; 
    margin: 1px 0px 0px 185px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; 
    border-bottom:10px solid #F6F0E3; 
}
.options_full_container{
    position: relative;
    margin: 0px auto;
    text-shadow: none;
    padding: 0px;
    .title{
        width: 100%;
        background: #F6F0E3;
        border-top: 1px solid #F0E6D1;
        border-bottom: 1px solid #F0E6D1;

        overflow: auto;
        .title_content {
            width: 940px;
            margin: 0px auto;
            color: #666;
            padding: 9px 0px 2px 0px;
            .title_text{
                font-family: @serif;
                font-weight: bold;
                font-size: 15px;
            }
            .version{
                float: right;
                margin: 0px 0px 7px 0px;
                font-family: @sans;
                font-size: 13px;
                -webkit-font-smoothing: antialiased;
                .layers{
                    float: left;
                    display: block;
                    margin: 3px 8px 0px 0px;
                    opacity: 0.7;
                }
            }
        }
    }
    .options_content{
        width: 940px;
        margin: 3px auto;
        padding: 8px 0px 0px 0px;
        overflow: auto;
        .toggle-primary{
            float: left;
            margin: 2px 0px 3px 0px;
            .switch{
                float: none;
            }
        }
        .description{
            margin: 5px 0px 0px 120px;
            font-family: @sans;
            font-size: 14px;
            color: #666;
        }
    }
}

/*
    ----------------------------
    Button styles
    ----------------------------
*/
button.btn {
    display: inline-block;
    position: relative;
    padding: 6px 14px 5px;
    margin-bottom: 0;
    margin-left: 7px;
    vertical-align: middle;
    cursor: pointer;

    font-family: @sans;
    font-size: 13px;
    line-height: 18px;
    text-align: center;

    // csshat
    .border-radius(3px); // border radius
    .box-shadow(~"0 2px 1px rgba(0,0,0,.05)"); // drop shadow

    // ===== Normal button style
    color: #7D7D7D; // text color + color overlay
    text-shadow: 0 1px 0 #fff; // drop shadow
    border: 1px solid #ccc; // stroke
    background-color: #fff; // layer fill content
    .gradient(~"linear-gradient(bottom, rgba(0,0,0,.04) 0%, rgba(255,255,255,.04) 100%)"); // gradient overlay

    &:not([disabled]) {
        &:hover {
            .box-shadow(~"inset 0 0 1px 1px #fff"); // inner glow
            // here we add a fake gradient -- opacity layer of white with 96% visibility on top of the button before applying the real gradient below
            .gradient(~"linear-gradient(rgba(255,255,255,0.96), rgba(255,255,255,0.96)), linear-gradient(bottom, rgba(51,51,51,.23) 0%, rgba(255,255,255,.23) 100%)"); // color overlay + gradient overlay
        }
        &:active {
            background-color: #f2f2f2; // layer fill content
            .box-shadow(~"inset 0 2px 1px rgba(0,0,0,.06)"); // inner shadow
            .gradient(~"linear-gradient(bottom, rgba(255,255,255,.02) 0%, rgba(0,0,0,.02) 100%)"); // gradient overlay
        }
    }

    // ===== Primary button style (blue)
    &.btn-primary {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3); // drop shadow
        border: 1px solid #2f89b1; // stroke
        background-color: #1da3dd; // layer fill content
        .gradient(~"linear-gradient(bottom, rgba(11,155,222,1), rgba(75,181,229, 1))"); // gradient overlay

        &:not(.disabled) {
            &:hover {
                .box-shadow(~"inset 0 0 2px 0 rgba(255,255,255,0.8)"); // inner glow
                .gradient(~"linear-gradient(bottom, rgba(32,164,222,1), rgba(74,181,228, 1))"); // gradient overlay
            }
            &:active {
                .box-shadow(~"inset 0 1px 1px rgba(0,0,0,0.08)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(65,158,198,1), rgba(51,143,184, 1))"); // gradient overlay
            }
        }
    }

    // ===== Danger button style (red)
    &.btn-danger {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3); // drop shadow
        border: 1px solid #b23f37; // stroke
        background-color: #d6544a; // layer fill content
        .gradient(~"linear-gradient(bottom, rgba(226,89,79,1), rgba(232,121,113, 1))"); // gradient overlay

        &:not([disabled]) {
            &:hover {
                .box-shadow(~"inset 0 0 2px 0 rgba(255,255,255,0.8)"); // inner glow
                .gradient(~"linear-gradient(bottom, rgba(230,114,105,1), rgba(235,141,134, 1))"); // gradient overlay
            }
            &:active {
                .box-shadow(~"inset 0 1px 1px rgba(0,0,0,0.08)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(216,93,85,1), rgba(201,79,71, 1))"); // gradient overlay
            }
        }
    }

    // ===== Danger button style (red) -- variant for resolve issues
    &.btn-resolve-issues {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3); // drop shadow
        border: 1px solid #a94240; // stroke
        background-color: #ed6f66; // layer fill content
        .gradient(~"linear-gradient(bottom, rgba(237,112,102,1), rgba(239,129,121, 1))"); // gradient overlay

        &:not([disabled]) {
            &:hover {
                .box-shadow(~"inset 0 0 2px 0 rgba(255,255,255,0.8)"); // inner glow
                .gradient(~"linear-gradient(bottom, rgba(230,114,105,1), rgba(235,141,134, 1))"); // gradient overlay
            }
            &:active {
                .box-shadow(~"inset 0 1px 1px rgba(0,0,0,0.08)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(216,93,85,1), rgba(201,79,71, 1))"); // gradient overlay
            }
        }
    }

    // ===== Success button style (green)
    &.btn-success {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3); // drop shadow
        border: 1px solid #4fa435; // stroke
        background-color: ; // layer fill content
        .gradient(~"linear-gradient(bottom, rgba(115,196,91,1), rgba(142,208,123,1))"); // gradient overlay

        &:not([disabled]) {
            &:hover {
                .box-shadow(~"inset 0 0 2px 0 rgba(255,255,255,0.8)"); // inner glow
                .gradient(~"linear-gradient(bottom, rgba(136,205,115,1), rgba(159,215,1421))"); // gradient overlay
            }
            &:active {
                .box-shadow(~"inset 0 1px 1px rgba(0,0,0,0.08)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(113,181,93,1), rgba(99,167,78,1))"); // gradient overlay
            }
        }
    }

    // ===== Disabled button styles
    &:disabled {
        .opacity(0.65);
    }
}

/*
    ----------------------------
    Alert styles
    ----------------------------
*/
.alert{
    display: none; // by default, alerts are hidden until they're shown with JS
    clear: both;
    font-family: @sans;
    font-size: 13px;
    .border-radius(3px); // border radius
    padding: 10px 35px 10px 10px;
    margin-bottom: 10px;

    // default is the same as for alert-warning
    border: 1px solid #e9d295; // stroke
    background-color: #faf3d7; // layer fill content
    color: #bf9947; // text color + color overlay

    p { margin: 0; }

    &.alert-success {
        border: 1px solid #bdd4b6; // stroke
        background-color: #effceb; // layer fill content
        color: #69925c; // text color
    }

    &.alert-warning {
        border: 1px solid #e9d295; // stroke
        background-color: #faf3d7; // layer fill content
        color: #bf9947; // text color + color overlay
    }

    &.alert-error {
        border: 1px solid #e59c9c; // stroke
        background-color: #f1d5d5; // layer fill content
        color: #d95b5b; // text color + color overlay
    }

    .close, .close_hide {
        position: relative;
        float: right;
        right: -23px;
        font-weight: bold;
        font-size: 24px;
        color: black;
        .opacity(0.2);
        &:hover {
            .opacity(0.4);
            text-decoration: none;
        }
        cursor: pointer;
    }
    &.displayed_alert { display: block; } // a displayed alert is one that should be shown by default (helps with re-renders)
}

/*
    ----------------------------
    Main content
    ----------------------------
*/
#sticky-wrap {
    min-width: 940px;
    background: url('images/body_bg_tile.png'); // background.png
}
#main-container {
    padding-top: 30px;
    
    .cluster_with_margin{
        padding: 0px 20px;
    }

    .section {
        padding: 20px 25px; 
        margin-bottom: 25px;

        // csshat
        border: 1px solid #cfcfcf; // stroke
        .border-radius(4px); // border radius
        background-color: #fbfbfb; // layer fill content
        .box-shadow(~"0 2px 1px rgba(0,0,0,.04), inset 0 -1px 2px rgba(0,0,0,.05)"); // drop shadow and inner shadow

        h2.title {
            margin-top: 0;
            font-family: @serif;
            color: #a3a3a3;
            font-size: 19px;
            margin-bottom: 20px;
        }
    }

}

/*
    ----------------------------
    Shared classes
    ----------------------------
TODO: retire this
*/
.no_element{
    @bar_height: 44px;
    background: #FFF;
    border: thin solid #cfcfcf;
    .border-radius(3px);
    margin-top: 12px;
    .box-shadow(~"0 1px 0 rgba(255, 255, 255, 0.02), 0 1px 3px rgba(0, 0, 0, 0.08)");

    padding: 8px 0px;
    text-align: center;
    font-family: @sans;
    font-size: 14px;
    color: #777;
    background: #f6f6f6;
    p{
        margin: 0px;
    }
}



/*
    ----------------------------
    Footer
    ----------------------------
*/
#footer {
    background-color: #e5e5e5;
    color: #a3a3a3;
    font-family: @serif;
    font-size: 14px;
    padding-top: 30px;
    border-top: thin solid #d0d0d0;
    ul {
        float: left;
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
            display: inline-block;
            margin-right: 63px;
            a { color: #a3a3a3; }
            &:last-child{
                margin-right: 0px
            }
        }
    }

    p.copyright { 
        float: right;
        margin: 0;
    }
}

/*
    ----------------------------
    Navbar at the top
    ----------------------------
*/
#navbar-container {
    width: 100%;
    background-color: #272729; // layer fill content
    .box-shadow(~"0 1px 3px rgba(0,0,0,.2), inset 0 -2px 4px rgba(0,0,0,.15)"); // drop shadow and inner shadow
    .gradient(~"linear-gradient(bottom, rgba(0,0,0,.07) 0%, rgba(255,255,255,.07) 100%)"); // gradient overlay


    #navbar {
        font-family: @sans;
        @text_shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        
        /* left nav (logo, links, etc.) */
        ul.nav-left {
            margin: 0;
            padding: 0;
            float: left;
            li {
                font-size: 15px;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                text-shadow: @text_shadow;
                margin-left: -3px;
                a {
                    padding: 21px 0px;
                    color: #ababab;
                    display: block;
                    &:hover {
                        text-decoration: none;
                        color: white;
                    }
                }
                &#nav-logo {
                    width: 131px;
                    text-align: left;
                    a {
                        font-family: @serif;
                        font-size: 22px;
                        font-weight: bold;
                        color: white;
                        padding-left: 0;
                        span.highlight { color: @accent; }
                    }
                }

                &.active {
                    a { color: white; }
                }
            }
            /* Fonts are not rendered on the same way on Linux and OS X, making the menu having different sizes.
            We fix this problem by specifying the witdth of our blocks. */
            #nav-dashboard{
                width: 118px;
            }
            #nav-namespaces{
                width: 86px;
            }
            #nav-servers{
                width: 94px;
            }
            #nav-dataexplorer{
                width: 136px;
            }
            #nav-logs{
                width: 74px;
            }
            #nav-options{
                width: 60px;
            }
            .cog_icon{
                .opacity(0.4);
            }
            .cog_icon:hover, .cog_icon.active{
                .opacity(0.9);
            }
            #nav-options{
                position: relative;
            }
        }
        /* right nav (search) */
        .right-nav {
            margin: 0;
            padding: 0;
            float: right;
            position: relative;

            .divider {
                position: absolute;
                left: 0;
                width: 1px;
                height: 36px;
                margin: 12px 0;
                background-color: #212122; // layer fill content
                .box-shadow(~"1px 0 0 rgba(255,255,255,.04)"); // drop shadow
            }
        }

        #nav-search {
            margin-bottom: 0;
            margin-left: 28px;
            .search-box {
                font-family: @sans;
                font-size: 15px;
                border: 0 none;
                color: #888;

                text-shadow: @text_shadow;
                margin-top: 15px;
                padding: 6px 12px 6px 40px;
                width: 145px;
                line-height: normal;

                // csshat
                .border-radius(14px); // border radius
                .box-shadow(~"0 1px 0 rgba(255,255,255,.07), inset 0 1px 0 rgba(0,0,0,.15)"); // drop shadow and inner shadow
                .gradient(~"linear-gradient(bottom, rgba(255,255,255,.02) 0%, rgba(0,0,0,.02) 100%)"); // gradient overlay
                background: url('images/icon-magnifying_glass.png') no-repeat 12px #232323;
            }
        }
    }
}

/*
    ----------------------------
    Status bar at the top
    ----------------------------
*/
#sidebar {
    // texture, so we need a background image
    background: url('images/status-panel_bg_tile.png');
    // csshat
    .box-shadow(~"0 1px 0 rgba(255,255,255,.4), inset 0 -1px 1px #c3c3c3"); // drop shadow and inner shadow
    border-bottom: thin solid #d0d0d0;
    .cluster-status { padding: 20px 0; }
    .panel {
        padding-left: 60px;
        height: 47px;
        h5 {
            font-family: @sans;
            font-size: 14px;
            line-height: 15px;
            margin: 0;
            padding: 0;
            margin-bottom: 4px;
            color: #909090;
        }

        h4 {
            font-family: @serif; 
            font-size: 18px;
            line-height: 24px;
            margin: 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #4d535c;
        }
    }

    .client-connection-status .panel {
        background: url('images/status_panel-icon_1.png') no-repeat left center;
        &.error { background: url('images/status_panel-icon_1-error.png') no-repeat left center; }
    }
    .issues .panel {
        background: url('images/status_panel-icon_2.png') no-repeat left center;
        &.error { background: url('images/status_panel-icon_2-error.png') no-repeat left center; }
    }
    .servers-connected .panel {
        background: url('images/status_panel-icon_3.png') no-repeat left center;
        &.error { background: url('images/status_panel-icon_3-error.png') no-repeat left center; }
    }
    .datacenters-connected .panel {
        background: url('images/status_panel-icon_4.png') no-repeat left center;
        &.error { background: url('images/status_panel-icon_4-error.png') no-repeat left center; }
    }

    .issues-banner {
        .show-issues-banner {
            margin-top: 8px;
            color: #FFF;
            position: relative;
            background-color: #dd504e;

            @border: 1px solid #b54a48; 
            border-top: @border;
            border-bottom: @border;

            @bar_height: 42px;

            &.no-issues {
                background-color: #4E9258;
                border-color: #41834a;
                &:before { 
                    background-color: #4E9258;
                    border-color: #41834a;
                }
            }

            .message {
                line-height: @bar_height;
                margin: 0;
                text-shadow: 0 -1px 0 rgba(0,0,0,.25); // drop shadow
                font-size: 15px;
            }


            .btn-resolve-issues {
                float: right;
                margin-left: 20px;
                margin-top: (@bar_height - 31px)/2;
                &.hide-issues { display: none;}
            }

            // Hack required for the css arrow-- we need to hide the bottom half of the arrow, so fill it in with a gradient overlay
            .gradient-overlay {
                /* transform z-index hack */    
                .transform(~"rotate(0deg)");

                background-color: #dd504e; // layer fill content
                &.no-issues { background-color: #4E9258; }
            }

            // CSS arrow for the banner: this is basically a box turned 45 deg
            &:before {
                @size: 14px;
                content: '';
                position: absolute;

                top: -(@size/2);
                left: 50%;
                margin-left: -215px;

                background: #dd504e;
                display: block;
                width: @size;
                height: @size;

                .transform(~"rotate(45deg)");
                border: @border;
            }
        }
    }
    .all-issues {
        display: none;
        background-color: #fcfcfc;
        border-bottom: 1px solid #ccc;
        #issue-alerts .alert {
            display: block; 

            background: 15px center no-repeat url('images/resolve_issue-resolved_icon.png');
            padding-left: 40px;
            color: #628857; // text color
            border: 1px solid #cae8c3; // stroke
            .border-radius(3px); // border radius
            background-color: #effceb; // layer fill content
        }
    }
}

/* 
    ----------------------------
    Overwrite modal 
    ----------------------------
*/
.overwrite_modal{
    top: 0%;
    left: 50%;
    width: 900px;
    padding: 20px;
    max-height: 80%;
    margin: 50px 0px 0px -470px;
}

/* 
    ----------------------------
    Modal styles
    ----------------------------
*/

.modal-backdrop {
    .opacity(0.8);
}

.add-namespace{
    .hide_advanced_settings-link_container, .advanced_settings{
        display: none;
    }
}
.modal{
    p{
        margin: 8px 0px;
    }
    .alert{
        margin-bottom: 15px;
    }
    .alert_modal{
        p { margin: 0; }
        .close { display: none; }
        margin: 15px 15px 0 15px;
    }

    .modal-header h3 {
        margin: 8px 0;
        font-family: @serif;
        color: #a3a3a3;
        font-size: 19px;
    }

    .close_modal {
        float: right;
        font-weight: bold;
        font-size: 24px;
        color: black;
        .opacity(0.2);
        &:hover {
            .opacity(0.4);
            text-decoration: none;
        }
    }

    .modal-body {
        font-family: @sans;
        padding: 0px 15px 15px 15px;
    }
    .large_input{
        width: 294px;
    }
}

/*
    ----------------------------
    Dashboard
    ----------------------------
*/
#dashboard_container {
    #cluster_status_container {
        padding: 0;
        width: 940px;
        overflow: auto;
        border-collapse: collapse;
        td{
            border: thin solid #dfdfdf;
        }
        .panel {
            @bad: #e85250;
            @good: #3ba51a;
            width: 25%;
            vertical-align: top;
            & > div:first-child{
                margin: 20px;
            }
            h3 {
                margin-top: 0;
                margin-bottom: 10px;
                font-family: @serif;
                font-size: 17px;
                color: #4c4c4c;
                padding-left: 21px;
            }
            
            .no-problems-detected h3 { background: 0 3px no-repeat url('images/green-light.png'); }
            .problems-detected h3 { background: 0 3px no-repeat url('images/red-light.png'); }

            p {
                font-family: @sans;
                font-size: 14px;
                line-height: 22px;
                margin: 0;
                color: #4c4c4c;
                span.good { color: @good; }
                span.bad { color: @bad; }
                span.good, span.bad { font-weight: bold; }
            }

            &.first { border-left: none; }

            .popup_container{
                display: none;
                width: 430px;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 200;
                padding: 10px 20px;
                border: thin solid #cfcfcf;
                background: #fff;
                .inner_content{
                    max-height: 600px;
                    overflow: auto;
                }
                .close{
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    color: #444;
                    font-size: 18px;
                    text-decoration: none;
                }
                .arrow_left{
                    position: absolute;
                    z-index: 201;
                    top: 60px;
                    left: -11px;
                    width: 0; 
                    height: 0; 
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent; 
                    border-right:10px solid #bbb; 
                }
                .arrow_left_overlay{
                    position: absolute;
                    z-index: 202;
                    top: 60px;
                    left: -10px; //TODO
                    width: 0; 
                    height: 0; 
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent; 
                    border-right:10px solid #fff; 
                }
                .arrow_right{
                    position: absolute;
                    z-index: 201;
                    top: 60px;
                    left: 471px;
                    width: 0; 
                    height: 0; 
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent; 
                    border-left:10px solid #bbb; 
                }
                .arrow_right_overlay{
                    position: absolute;
                    z-index: 202;
                    top: 60px;
                    left: 470px;
                    width: 0; 
                    height: 0; 
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent; 
                    border-left:10px solid #fff; 
                }

                h4{
                    font-family: @sans;
                    font-size: 16px;
                    margin: 15px 0px 10px 0px;
                    padding: 0px 20px 10px 20px;
                    border-bottom: 1px solid #999;
                    background: none;
                }
                .ul_first_level{
                    margin: 0px 0px 10px 0px;
                    padding: 0px;
                    list-style: none;
                }
                .li_first_level{
                    font-weight: bold;
                }
                .ul_second_level{
                    margin: 6px 0px 15px 10px;
                    padding: 0px;
                    list-style: none;
                    font-weight: normal;
                }
                .li_second_level{
                    margin: 0px;
                    padding: 0px 0px 5px 10px;
                    border-left: 1px solid #ccc;
                }
                .resolve_issues_link{
                    margin-left: 300px;
                    font-weight: bold;
                }
            }
        }
    }
    #log-view {
        h2.title { 
            border-bottom: thin solid #f0f0f0;
            padding-bottom: 22px;
            margin-bottom: 0;
        }
        .btn.view-logs { float: right; }
        ul.log-entries { margin-bottom: 5px; }
    }
}


/*
    ----------------------------
    Server list and table list
    ----------------------------
*/
#server-list, #table-list {
    h1.title {
        font-family: @serif;
        color: #4d535c;
        font-size: 19px;
        margin-bottom: 25px;
    }

    .actions-bar { float: right; }

    .section {
        padding: 0;
        .header_container {
            border-bottom: thin solid #CCC;
            padding: 13px 15px;
            background: #fff;
            .border-radius(4px 4px 0px 0px);

            .summary {
                .element-type, h3.name { 
                    display: inline-block;
                    vertical-align: middle;
                }
                .element-type {
                    background: #f7ae41;
                    .border-radius(2px);
                    padding: 4px 15px;
                    text-transform: uppercase;
                    margin-right: 20px;
                    color: #fff;
                    font-size: 10px;
                    font-weight: bold;
                }
                h3.name {
                    font-family: @serif;
                    font-size: 17px;
                    color: #61666e;
                    margin: 0;
                    a { color: #61666e; }
                }
                .buttons {
                    float: right;
                    margin-top: -2px;
                }
            }
        }

        .element-list-container {
            padding: 0px 13px 12px 13px;
            background: #fafafa;
            .border-radius(0px 0px 4px 4px);
        }

        .element {
            @bar_height: 44px;
            height: @bar_height;
            background: #FFF;
            border: thin solid #cfcfcf;
            .border-radius(3px);
            margin-top: 12px;
        
            .box-shadow(~"0 1px 0 rgba(255, 255, 255, 0.02), 0 1px 3px rgba(0, 0, 0, 0.08)");

            .checkbox-container {
                float: left;

                label {
                    display: inline;
                    margin: 14px;
                }
                input[type="checkbox"] { display: none; }

                input[type="checkbox"] + label {
                    border: thin solid #cfcfcf;
                    .border-radius(3px);
                    padding: 7px;
                    display: inline-block;
                    position: relative;
                    &:active { .box-shadow(~"0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1)"); }
                }
                input[type="checkbox"]:checked + label:after {
                    content: '\2714';
                    font-size: 15px;
                    position: absolute;
                    top: -2px;
                    left: 1px;
                    color: #7c7c7c;
                }
            }

            .element-details { 
                position: relative;
                margin-left: 45px;

                @border_padding: 20px;
                @offset: 8px;
                @line_height: @bar_height - @offset*2;

                p {
                    margin: 0;
                    font-family: @sans;
                }
                .name, .quick_info, .status {
                    @offset: 8px;
                    position: absolute;
                    line-height: @line_height;
                    margin-top: @offset;
                    border-left: thin solid #e4e4e4;
                }
                .name {
                    background: @border_padding center no-repeat url('images/server-icon.png');
                    padding-left: 38px + @border_padding;
                    a { color: #0597d8; }
                    font-size: 16px;
                    font-weight: bold;
                    width: 400px;
                    height: @line_height;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .quick_info {
                    background: @border_padding center no-repeat url('images/graph-icon.png');
                    color: #626264;
                    padding-left: 30px + @border_padding;
                }
                .status {
                    padding-right: 20px;
                    color: #818181;
                    .label-success {
                        background: @border_padding center no-repeat url('images/green-light_glow.png');
                        padding-left: 23px + @border_padding;
                    }
                    .label-failure {
                        background: @border_padding center no-repeat url('images/red-light_glow.png');
                        padding-left: 23px + @border_padding;
                    }
                }

            }
        }
    }
}

#server-list {
    .element-details {
        .quick_info {
            left: 475px;
        }
        .status {
            left: 725px;
        }
    }
}
#table-list {
    .element-details {
        .quick_info {
            left: 575px;
        }
        .status {
            left: 775px;
        }
    }
}

/*
    ----------------------------
    Log view
    ----------------------------
*/

#log-view {
    h1.title {
        font-family: @serif;
        color: #4d535c;
        font-size: 19px;
        border-bottom: thin solid #f0f0f0;
        padding-bottom: 25px;
        margin-bottom: 0;
    }

    ul.log-entries {
        list-style-type: none;
        padding-left: 0;
        margin-top: 0;

        li.log-entry {
            font-size: 14px;
            color: #4d535c;
            border-top: thin solid #f0f0f0;
            background: left 22px no-repeat url('images/pencil-icon_big.png');
            padding: 20px 0 20px 55px;
            word-wrap: break-word;
            &:first-child {
                border-top: 0;
            }
            p {
                margin: 0; 
                font-family: @sans;
            }
            .message { font-size: 14px; }
            li.pretty_logs_li { font-size: 13px; }
            .from-machine {
                font-style: italic;
                margin-top: 5px;
                font-size: 13px;
            }
            .datetime {
                background: left center no-repeat url('images/clock-icon.png');
                text-align: right;
                color: #c4c4c4;
            }
        }
    }
    .no-more-entries{
        font-family: @sans;
        display: none;
    }
}

/*
    ----------------------------
    Data explorer 
    ----------------------------
*/
/* Prevent the user from selecting something when he's resizing a div */
.resizing{
    .user-select(none)
}
#dataexplorer{
    margin: 0px;
    .options_container{
        float: right;
        margin-top: 5px;
        .option_icon{
            width: 16px;
            height: 16px;
            opacity: 0.3;
        }
        /* Selected icons from http://somerandomdude.com/work/iconic/ */
        .fullscreen{
            background: url('images/fullscreen_16x16.png') center no-repeat;
        }
        .fullscreen_exit{
            background: url('images/fullscreen_exit_16x16.png') center no-repeat;
        }
        .show_options{
            background: url('images/cog_16x16.png') center no-repeat;
        }
        .show_history{
            background: url('images/book_alt_16x16.png') center no-repeat;
            float: left;
            margin: 0px 8px 0px -1px;
        }
        .clear_queries_link{
            display: none;
            .clear_history{
                background: url('images/trash_stroke_16x16.png') center no-repeat;
                float: left;
                margin: 0px 8px 0px -1px;
            }
        }
        .close_queries_link, .toggle_options_link{
            &.active{
                background-color: #f2f2f2; // layer fill content
                .box-shadow(~"inset 0 2px 1px rgba(0,0,0,.06)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(255,255,255,.02) 0%, rgba(0,0,0,.02) 100%)"); // gradient overlay
            }
        }


    }

    h1.title{
        font-family: @serif;
        color: #4d535c;
        font-size: 19px;
        &.small_margin_bottom{
            margin-bottom: 15px;
        }
    }
    .input_query_full_container{
        clear: both;
        position: relative;
        width: 100%;
        .suggestion_description_arrow{
            display: none;
            position: absolute;
            z-index: 201;
            top: 10px;
            left: 0px;
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent; 
            border-bottom:10px solid #bbb; 
        }
        .suggestion_description_arrow_overlay{
            display: none;
            position: absolute;
            z-index: 202;
            top: 11px;
            left: 0px; //TODO
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent; 
            border-bottom:10px solid #fff; 
        }
        .suggestion_full_container{
            position: absolute;
            width: 452px;
            top: 20px;
            left: 0px;
            z-index: 100;
            font-family: @monospace;
            .suggestion_name_list{
                background: #fff;
                display: none;
                width: 452px;
                padding: 0px;
                margin: 0px 0px 9px 0px;
                border: 1px solid #d7d7d7;
                .border-radius(4px);
                .box-shadow(~"inset 0 -6px 6px -6px #ddd");

                .suggestion_name_li{
                    display: inline-block;
                    margin: 5px 0px;
                    padding: 0px 5px;
                    width: 132px;
                    height: 18px;
                    color: #23a5df;
                    cursor: pointer;
                    text-overflow: ellipsis;
                }
                .suggestion_name_li_hl{ color: #005388; }
            }
            .suggestion_description{
                display: none;
                width: 442px;
                padding: 5px;
                margin: 0px;
                background: #fcfcfc;
                border: 1px solid #d7d7d7;
                color: #9ea2a8;
                font-family: @monospace;
                word-wrap: break-word;
                .border-radius(4px);
                .box-shadow(~"inset 0 -6px 6px -6px #ddd;");
                .separation{
                    height: 1px;
                    border-top: 1px solid #dadada;
                    margin: 3px auto;
                    width: 300px;
                }
                p, code{
                    font-family: @monospace;
                    font-size: 13px;
                    margin: 3px 0px;
                    .description_name{
                        color: #000;
                        font-weight: bold;
                    }
                    .description_arguments{
                        color: #444;
                    }
                }
                strong{
                    color: #666;
                }
            }
        }
        .input_query_container{
            font: @monospace;

            padding: 0px;
            margin: 10px 0px;
            overflow: auto;

            button {
                float: right;
            }

            .CodeMirror{
                background: #f8f8f8;
                .box-sizing(border-box);
                border: 1px solid #e3e3e3;
                cursor: text;
                .CodeMirror-gutter{
                    background: #f1f1f1;
                    border-right: 1px solid #e3e3e3;
                    cursor: auto;
                }
            }

        }
        .loading_query{
            text-align: center;
            height: 16px;
            width: 16px;
            padding: 0px;
            margin: -30px auto 10px auto;
            .loading_query_img{ display: none; }
        }
    }
    .toggled_container{
        .arrow_dataexplorer{
            display: none;
            float: right;
            width: 0; 
            height: 0; 
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #aaa;
        }
        .nano{
            visibility: hidden;
            height: 0px;
            padding: 0px 15px 0px 0px;
            .content{
                .history_container{
                    display: none;
                    font-family: @monospace;
                    font-size: 15px; // Exact match with codemirror
                    width: 100%;
                    .history_list{
                        margin: 0px 15px 0px 0px;
                        display: block;
                        clear: both;
                        list-style: none;
                        padding: 0px;
                        .query_history{
                            margin: 0px;
                            padding: 0px;
                            overflow: auto;
                            border-bottom: 1px solid #e4e4e4;
                            &.displayed{
                                display: block;
                            }
                            &.hidden{
                                display: none;
                            }
                            &:last-child{ //Need it to make the slideDown/Up smooth
                                margin: 0px;
                                border-bottom: 0px;
                            }
                            color: #999;
                            &:hover{
                                color: #444;
                            }
                            .query_history_content{
                                overflow: auto;
                                word-break: break-word;
                                white-space: pre;
                                margin: -40px 0px 0px 30px;
                                padding: 11px 4px;
                                .right_container{
                                    float: right;
                                }
                                .btn{
                                    padding: 2px 10px;
                                    float: right;
                                    margin: -8px 12px 0px 0px;
                                    top: 5px;
                                    .box-shadow(~"0px 0px 0px 0px #fff");
                                }
                                .broken_query{
                                    float: right;
                                    margin: 0px 12px 0px 0px;
                                    top: 5px;
                                    visibility: hidden;
                                    height: 19px;
                                    width: 22px;
                                    opacity: 0.2;
                                }
                            }
                            .query_id{
                                padding: 11px 0px;
                                width: 28px;
                                text-align: center;
                            }
                            .btn{
                                visibility: hidden;
                            }
                            &:hover{
                                .btn, .broken_query{
                                    visibility: visible;
                                }
                            }
                        }
                        .no_history{
                            word-break: break-word;
                            white-space: pre;
                            margin: 0px;
                            padding: 11px 4px;
                            margin: 0px 0px 0px 26px;
                            color: #aaa;               
                            &.displayed{
                                display: block;
                            }
                            &.hidden{
                                display: none;
                            }
                        }
                    }
                }


            }
        }
        .nano_border{
            display: none;
            clear: both;
            width: 100%;
            border-top: 2px solid #aaa;
        }
        .nano_border_bottom{
            cursor:s-resize;
            padding: 0px 0px 2px 0px;
        }

    }

    .arrow_history{
        margin-right: 154px;
    }
    .arrow_options{
        margin-right: 74px;
    }
    .options_view{
        ul{
            list-style: none;
            margin: 0px;
            padding: 0px 0px 0px 0px;
            li{
                clear: both;
                margin: 0px;
                padding: 0px 0px 0px 13px;
                overflow: auto;
                border-bottom: 1px solid #e4e4e4;
                &.displayed{
                    display: block;
                }
                &.hidden{
                    display: none;
                }
                &:last-child{ //Need it to make the slideDown/Up smooth
                    margin: 0px;
                    border-bottom: 0px;
                }
                color: #999;
                .option_description{
                    margin: 0px;
                    padding: 9px 4px;
                    font-family: @monospace;
                    font-size: 15px;
                }
                &:hover{
                    color: #444;
                }
        .alert{
            display: none;
            visibility: hidden;
            float: right;
            margin: 3px 15px 3px 0px;
            padding: 5px 25px 5px 10px;
            font-family: @sans;
            display: block;
        }

            }
        }
        .checkbox-container {
            float: left;
            margin-left: 2px;

            label {
                display: inline;
                margin: 14px;
            }
            input[type="checkbox"] { display: none; }

            input[type="checkbox"] + label {
                border: thin solid #cfcfcf;
                .border-radius(3px);
                padding: 7px;
                display: inline-block;
                position: relative;
                &:active { .box-shadow(~"0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1)"); }
                margin: 10px 17px 0px 0px;
            }
            input[type="checkbox"]:checked + label:after {
                content: '\2714';
                font-size: 15px;
                position: absolute;
                top: -2px;
                left: 1px;
                color: #7c7c7c;
            }
        }
    }
    .result_view{
        margin: 35px 0px 0px 0px;
        overflow: auto;
        .tab-content{
            clear: both;
        }
        .error{ font-family: @sans; }
        .error_title{ font-weight: bold; }
        .error_details{
            font-family: @monospace;
            padding: 7px 10px;
            border: 1px solid #CCC;
            border-radius: 3px;
            background: #EEE;
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+, 6, 7, 8 compability-mode */
            -ms-word-break: break-all; /* Internet Explorer 8 */
            word-break: break-word;
        }
        .query{
            font-family: @monospace;
            padding: 7px 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background: #eee;
        }
        .results_header{
            .show_query_warning{
                padding: 0px;
                margin: 0px;
            }
            .metadata{
                font-family: @sans;
                width: 530px;
                float: left;
                margin: -30px 0px 10px 0px;
            }
        }
        .more_results{
            float: right;
            .more_results_paragraph{
                margin: 0px;
                padding: 0px;
            }
        }
        .info{
            text-align: left;
            margin: 7px 0px 0px 0px;
            padding: 7px 19px 7px 15px;
            border-left: 4px solid #9FCADF;
            background: #ecf2f7;
            font-family: @sans;
        }
        .activate_profiler_message {
            background: #f7f7f7;
            border: thin solid #E7E6E6;
            padding: 4px 30px;
            .border-radius(4px);
            p {
                margin: 18px 0;
                font-family: 'Open Sans', sans-serif;
                font-size: 16px;
                color: #686868;
                text-align: center;
                a {
                    border-bottom: thin dotted #0088cc;
                    &:hover { text-decoration: none; }
                }
            }
        }
    }
    .change_view_container{
        margin: 0px;
        padding: 0px;
        width: 100%;
        float: right;
        li {
            float: right;
            position: relative;
            &:first-child {
                margin-right: 10px;
            }
            &.active a {
                border-bottom-color: #FBFBFB;
                background-color: #FBFBFB;
            }
        }
    }

    .wrapper_scrollbar{
        position: fixed;
        bottom: 0px;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 888px;
        .scrollbar_fake_content{
            height: 20px;
        }
        z-index: 1000;
    }
    .results{
        margin: 15px 0px 0px 0px;
        padding: 0px;
        font-family: @sans;
        overflow: auto;
        width: 100%;
        .profile_summary {
            margin-bottom: 20px;
            background: #f7f7f7;
            border: thin solid #E7E6E6;
            padding: 4px 30px;
            .border-radius(4px);
            p {
                margin: 18px 0;
                font-family: 'Open Sans', sans-serif;
                font-size: 15px;
                color: #72bddf;
                span.big {
                    font-size: 24px;
                    line-height: 24px;
                    color: #5c6169;
                }
                &:before {
                    content: '';
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    margin-right: 14px;
                }
                &.query-duration-roundtrip {
                    text-align: left;
                    &:before { background: left center no-repeat url('images/query_round_trip-icon.png'); }
                }
                &.query-duration-server {
                    text-align: center;
                    &:before { background: left center no-repeat url('images/query_server_time-icon.png'); }
                }
                &.query-tasks {
                    text-align: right;
                    &:before { background: left center no-repeat url('images/query_shard_access-icon.png'); }
                }
            }
        }
        .copy_profile{
            float: right;
            &:after {
                content: '';
                display: block;
                float: left;
                width: 16px;
                height: 16px;
                margin-right: 9px;
                background: url('images/copy_to_clipboard_16x16.png') left center no-repeat;
            }
            &.zeroclipboard-is-hover {
                // Same as button.btn:hover
                .box-shadow(inset 0 0 1px 1px #fff);
                .background-image(linear-gradient(rgba(255,255,255,0.96), rgba(255,255,255,0.96)),linear-gradient(bottom, rgba(51,51,51,.23) 0%, rgba(255,255,255,.23) 100%));
                
            }
            &.zeroclipboard-is-active {
                // Same as button.btn:active
                background-color: #f2f2f2; // layer fill content
                .box-shadow(~"inset 0 2px 1px rgba(0,0,0,.06)"); // inner shadow
                .gradient(~"linear-gradient(bottom, rgba(255,255,255,.02) 0%, rgba(0,0,0,.02) 100%)"); // gradient overlay
            }
        }
        .json_tree_container{
            width: 888px;
        }
        .json_tree{ // Used in json_tree_container AND json_table_container
            padding: 0px 20px;
            float: left; // Clear the horizontal arrow
            font: 13px/18px monospace,mono,consolas;
            .jt_null{
                color: red
            }
            .jt_bool{
                color: #ee00ff;
            }
            .jt_num{
                color: blue;
            }
            .jt_link{
                text-decoration: none;
                color: #000;
            }
            .jt_url{ color: #08c; }
            .jt_email{ color: #08c; }
            .jt_string{
                white-space: pre;
                padding: 2px 0px;
                color: green;
            }
            /*.jt_b{ font-weight: bold; }*/
            .jt_close{ margin-left: 6px; }
            .jt_array{
                list-style: none;
                margin-left: 7px;
                padding-left: 22px;
                border-left: 1px dotted #bbb;
            }
            .jt_object{
                list-style: none;
                margin-left: 7px;
                padding-left: 22px;
                border-left: 1px dotted #bbb;
            }
            .jt_arrow{
                width: 15px;
                height: 15px;
                margin: 3px 2px 0px -15px;
                float: left;
                display: block;
                background: url('images/arrow_down.png') no-repeat;
            }
            .jt_arrow_hidden{ background: url('images/arrow_right.png') no-repeat; }
            .jt_points{ display: none; }
            .jt_points_collapsed{ display: inline; }
            .jt_collapsed{ display: none; }
            .jt_b_collapsed{
                display: inline;
                margin-left: 0px;
            }   
        }
        .json_table_container{
            width: 888px;
            .json_table{
                font: 13px/18px monospace,mono,consolas;
                padding: 0px;
                margin: 0px 0px 15px 0px;
                table-layout: fixed;
                white-space: nowrap;
                border-spacing: 0px;
                border-collapse: collapse;
                .td_attr{
                    color: #444;
                    background: #f1f1f1;
                    .box-shadow(~"inset 0 4px 4px -4px #fff");
                }
                .jta_undefined{ color: #ccc; }
                .jta_null{
                    color: red
                }
                .jta_bool{
                    color: #ee00ff;
                }
                .jta_num{
                    color: blue;
                }
                .jta_link{
                    text-decoration: none;
                    color: #000;
                }
                .jta_url{ color: #08c; }
                .jta_email{ color: #08c; }
                .jta_string{
                    color: green;
                    white-space: pre;
                }
                .jta_object{
                    vertical-align: top;
                    display: inline-block;
                    .json_tree{
                        padding: 0px 17px;
                    }
                }
                td{
                    max-width: 310px;
                    padding: 0px;
                    vertical-align: top;
                    border: 1px solid #dfdfdf;
                    overflow: hidden;
                }
                tr{
                    padding: 20px;
                    &:nth-child(even) {
                        background: #fff;
                    }
                    &:nth-child(odd) {
                        background: #f9f9f9;
                    }
                }
                .jta_attr{
                    margin: 0px 5px 0px 0px;
                    padding: 7px 0px 5px 15px;
                    cursor: auto;
                    overflow: hidden;
                }
                .jta_value{
                    cursor: auto;
                    margin: 0px 5px 0px 0px;
                    padding: 7px 0px 5px 15px;
                    max-width: 290px; // smaller margin on the right in case of overflow
                    overflow: hidden;
                }
                .jta_array{ padding: 7px 0px 5px 0px; }
                .jta_arrow{
                    width: 15px;
                    height: 15px;
                    margin: 3px 2px 0px 2px;
                    display: block;
                }
                .jta_arrow_v{
                    background: url('images/arrow_down.png') no-repeat;
                    float: left;
                }
                .jta_arrow_h{
                    background: url('images/arrow_right.png') no-repeat;
                    float: left;
                }
                .jta_arrow_hh{
                    width: 20px;
                    height: 10px;
                    background: url('images/arrow_right.png') repeat-x;
                    float: right;
                }
                .col-record-attr{
                    visibility: hidden;
                    border-left: 0px;
                    border-top: 0px;
                }
                .col-record-td{
                    padding: 0px;
                    background: #f0f0f0;
                }
                .col-record{
                    color: #aaa;
                    padding: 7px 10px 5px 10px;
                }
                .click_detector{
                    width: 100%;
                    cursor: e-resize;
                    div{ // All for the sake of Opera
                        cursor: text;
                        .jt_arrow, .jta_arrow{
                            cursor: default;
                        }   
                    }
                }
            }
        }
        .raw_view_container{
            padding: 5px;
            .raw_view_textarea{
                width: 100%;
                height: auto;
                padding: 4px;
                margin: 0px 0px 0px -5px;
            }
        }
    }
}

/*
    ----------------------------
    Resolve issues
    ----------------------------
*/
#resolve-issues{
    .container { padding: 18px 0; }
    .issue-container {
        border: 1px solid #dcdcdc; // stroke
        .border-radius(3px); // border radius
        background-color: #f7f7f7; // layer fill content
        .gradient(~"linear-gradient(bottom, rgba(247,247,247,1), rgba(250,250,250, 1))"); // gradient overlay
        .box-shadow(~"0 2px 1px rgba(0,0,0,.05)"); // drop shadow
        padding: 6px;
        margin-top: 10px;

        &:first-child {
            margin-top: 0;
        }

        p, li {
            font-family: @sans;
            font-size: 14px;
        }

        .solve-issue, .try-solve-issue{
            float:right;
        }

        hr {
            border: none;
            height: 1px;
            background-color: #eaeaea;
            .box-shadow(~"0 1px 0 rgba(255,255,255,.8)"); // drop shadow
        }

        .issue-header {
            @header_height: 31px;
            @divider_width: 1px;
            position: relative;
            height: @header_height;
            // Mixin for creating a divider
            .divider (@left_offset) {
                content: '';
                display: block;
                float: left;
                height: @header_height;
                width: @divider_width;
                margin-left: @left_offset;
                background-color: #eaeaea;
                .box-shadow(~"1px 0 0 #fff"); // drop shadow
            }

            p {
                position: absolute;
                text-overflow: ellipsis;
                overflow: hidden;
                margin: 0;
                color: #a6a6a6;
                line-height: @header_height;
                height: @header_height;

                &.issue-type {
                    background: 7px center no-repeat url('images/resolve_issue-danger_icon.png');
                    padding-left: 35px;
                    color: #e65b54; // text color + color overlay
                    font-weight: bold;
                    text-shadow: 0 1px 0 #fff; // drop shadow
                }

                &.message {
                    right: 375px;
                    width: 310px;
                    @icon_width: 30px;
                    @icon_padding: 20px;
                    background: @icon_padding center no-repeat url('images/resolve_issue-message_icon.png');
                    padding-left: @icon_width + @icon_padding;
                    &:before { .divider(-(@icon_width + @icon_padding)); }
                }

                &.datetime {
                    right: 125px;
                    width: 175px;
                    @icon_width: 30px;
                    @icon_padding: 20px;
                    background: @icon_padding center no-repeat url('images/resolve_issue-clock_icon.png');
                    padding-left: @icon_width + @icon_padding;
                    &:before { .divider(-(@icon_width + @icon_padding)); }
                }
            }
        }
        .issue-details {
            margin-top: 10px;
            background: 7px 3px no-repeat url('images/resolve_issue-details_icon.png');
            padding-left: 35px;
            p, li {
                color: #838383;
                font-size: 13px;
                &:first-child { margin-top: 0; }
            }
        }
        pre{
            word-wrap: break-word;
            font: @monospace;
            font-size: 11px;
        }
    }
}


/*
    ----------------------------
    Element views
    ----------------------------
*/
#database-view, #table-view, #datacenter-view, #server-view {
    h1.title {
        font-family: @serif;
        color: #4d535c;
        font-size: 19px;
        line-height: 20px;
        margin-bottom: 25px;
        width: 808px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .operations {
        float: right;
        margin-left: 10px;
    }
    .section h2.title { 
        border-bottom: thin solid #f0f0f0;
        padding-bottom: 22px;
        margin-bottom: 0;
    }
    .section.statistics {
        > h2.title { 
            border-bottom: thin solid #f0f0f0;
            padding-bottom: 20px;
            margin-bottom: 0;
        }
        .stat-row {
            @height: 60px;
            border-top: thin solid #f0f0f0;
            p {
                margin: 0px+(@height - 24)/2 0;
                font-family: @sans;
                font-size: 15px;
                color: #72bddf;
                padding-left: 30px;
                span.big {
                    font-size: 24px;
                    line-height: 24px;
                    color: #5c6169;
                }
                &.availability { background: left center no-repeat url('images/live-icon.png'); }
                &.masters { background: left center no-repeat url('images/layers-icon.png'); }
                &.replicas { background: left center no-repeat url('images/grid-icon.png'); }
                &.documents { background: left center no-repeat url('images/document-icon.png'); }
                &.datacenter { background: left center no-repeat url('images/layers-icon.png'); }
                &.uptime { background: left center no-repeat url('images/grid-icon.png'); }
                &.ips { background: left center no-repeat url('images/document-icon.png'); }
                &.tables { background: left center no-repeat url('images/document-icon.png'); }
                &.datacenters { background: left center no-repeat url('images/layers-icon.png'); }
                &.servers { background: left center no-repeat url('images/document-icon.png'); }
            }
            &.first { border-top: none; }
        }
    }
    .legend-container{
        overflow: auto;
        margin: 10px;
    }
    .plot-container{
        margin: 10px 0px 0px 0px;
    }
    .list-view {
        @element_height: 40px;
        @border: thin solid #f0f0f0;
        ul, li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li {
            position: relative;
            border-bottom: @border;
            height: @element_height;
            position: relative;
            list-style-type: none;
            p { 
                color: #a7a7a7;
                position: absolute;
                text-overflow: ellipsis;
                overflow: hidden;
                line-height: @element_height;
                margin: 0;
                font-family: @sans;
                font-size: 16px;
                .highlight { color: #f7ae41; }
            }
        }
    }

    .tree-view {
        overflow:hidden;
        @element_height: 40px;
        @square_bullet_width: 7px;
        @node_margin: 15px + @square_bullet_width;

        ul, li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        // top-level element in the tree
        li.parent {
            // tree list styles
            position: relative;
            .tree-line {
                position: absolute;
                top: (@element_height / 2) - (@square_bullet_width / 2) + 1;
                bottom: (@element_height / 2) - 1;
                width: @square_bullet_width;
                background-image: url('images/list-square-bullet.png'), url('images/list-vert-dash.png'); 
                background-position: left top, ((@square_bullet_width / 2) - 1) center;
                background-repeat: no-repeat, repeat-y;  
            }
            // parent element details
            .parent-info {
                margin-left: @square_bullet_width + 12px;
                p { 
                    text-overflow: ellipsis;
                    overflow: hidden;
                    line-height: @element_height;
                    margin: 0;
                    font-family: @sans;
                    font-size: 16px;
                    color: #5C6169;
                    word-wrap: break-word;
                    white-space: nowrap;
                    width: 878px;
                }
            }
        }
        // child element in the tree
        li.child {
            // tree list styles
            position: relative;
            .tree-node {
                position: absolute;
                width: @node_margin;
                top: 0;
                bottom: 0;

                background-image: url('images/list-square-bullet.png'), url('images/list-horiz-dash.png');  
                background-position: right center, ((@square_bullet_width / 2) - 1) center;
                background-repeat: no-repeat, repeat-x;
            }
            // child element details
            @border: thin solid #f0f0f0;
            .child-info {
                margin-left: @node_margin + 12px;
                border-bottom: @border;
                height: @element_height;
                position: relative;
                p { 
                    color: #a7a7a7;
                    position: absolute;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    line-height: @element_height;
                    margin: 0;
                    font-family: @sans;
                    font-size: 16px;
                    .highlight { color: #f7ae41; }
                }
            }
            &:first-child .child {
                border-top: @border;
            }
        }
    }
}

#database-view {
    .section.list-view.table-list {
        @element_height: 40px;
        li.table {
            background: left center no-repeat url('images/server-icon.png');
            padding-left: 30px;
            .name {
                width: 375px;
                height: @element_height;
            }
            .info {
                right: 200px;
                width: 200px;
                padding-left: 30px;
                background: left center no-repeat url('images/graph-icon.png');
            }
            .status {
                right: 0;
                .label { padding-left: 23px; }
                .label-success {
                    background: left center no-repeat url('images/green-light_glow_small.png');
                }
                .label-failure {
                    background: left center no-repeat url('images/red-light_glow_small.png');
                }
            }
        }
    }
}

#table-view {
    .section.tree-view.server-assignments {
        @element_height: 40px;
        li.server .server-info {
            background: left center no-repeat url('images/server-icon.png');
            padding-left: 30px;
            .name {
                width: 300px;
                height: @element_height;
            }
            .num-primaries {
                right: 350px;
                width: 145px;
                padding-left: 30px;
                background: left center no-repeat url('images/layers-icon.png');
            }
            .num-secondaries {
                right: 175px;
                width: 145px;
                padding-left: 30px;
                background: left center no-repeat url('images/grid-icon.png');
            }
            .num-keys {
                right: 0;
                padding-left: 35px;
                background: left center no-repeat url('images/bars-icon_server-assignments.png');
            }
        }
        .popup_container{
            display: none;
            width: 430px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 200;
            padding: 10px 20px;
            border: thin solid #cfcfcf;
            background: #fff;
            .inner_content{
                max-height: 600px;
                overflow: auto;
            }
            .close{
                position: absolute;
                top: 10px;
                right: 10px;
                color: #444;
                font-size: 18px;
                text-decoration: none;
            }
            .arrow_left{
                position: absolute;
                z-index: 201;
                top: 60px;
                left: -11px;
                width: 0; 
                height: 0; 
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent; 
                border-right:10px solid #bbb; 
            }
            .arrow_left_overlay{
                position: absolute;
                z-index: 202;
                top: 60px;
                left: -10px; //TODO
                width: 0; 
                height: 0; 
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent; 
                border-right:10px solid #fff; 
            }
            .arrow_right{
                position: absolute;
                z-index: 201;
                top: 60px;
                left: 471px;
                width: 0; 
                height: 0; 
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent; 
                border-left:10px solid #bbb; 
            }
            .arrow_right_overlay{
                position: absolute;
                z-index: 202;
                top: 60px;
                left: 470px;
                width: 0; 
                height: 0; 
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent; 
                border-left:10px solid #fff; 
            }

            h4{
                font-family: @sans;
                font-size: 16px;
                margin: 15px 0px 10px 0px;
                padding: 0px 20px 10px 20px;
                border-bottom: 1px solid #999;
                background: none;
            }
            .shards_list{
                li{
                    margin: 3px 0px 7px 20px;
                    list-style: square;
                    width: 400px;
                    border-bottom: 1px solid #eee;
                    .name {
                        width: 180px;
                        display: inline-block;
                        padding: 0px 0px 4px 0px;
                    }
                }
            }
        }
    }
    .section.replication {
        h2.title {
            border-bottom: none;
            padding-bottom: 10px;
        }
        .nav-tabs { padding-left: 0; }
        p, a { font-family: @sans; }

        .cluster_container{
            overflow: auto;
            border-bottom: 1px solid #efefef;
            padding: 10px 0;
            margin-bottom: 20px;
            .replica_container{
                .cluster-acks, .cluster-replicas {
                    display: inline-block;
                }
                p {
                    font-family: @sans;
                    margin: 0 60px 0 0;
                    span.value {
                        padding: 0px 6px 0px 0px;
                        color: #f7ae41;
                        font-size: 24px;
                        line-height: 48px;
                    }
                    span.caption {
                        color: #a9a9a9;
                        font-size: 14px;
                    }
                    &.max-value {
                        color: #a9a9a9;
                        font-size: 11px;
                    }
                }
                .inline_edit_input{
                    margin: 4px 6px 3px 0px;
                    width: 30px;
                    padding: 3px 4px;
                    height: 28px;
                    font-size: 20px;
                    font-family: @sans;
                }
                .btn{
                    margin-top: 6px;
                    float: right;
                    margin-left: 15px;
                }               
            }
        }
        .hide-mdc { display: none; }
        .mdc-options {
            margin-top: 20px;
            &.hidden { display: none; }
            .primary-dc {
                border-top: thin solid #efefef;
                padding-top: 15px;
                .content{
                    padding: 5px 0px 15px 0px;
                    p{
                        margin: 7px 0px;
                    }
                }
                .btn{
                    float: right;
                    margin-left: 15px;
                }               
                p {
                    margin: 0;
                    &.caption {
                        line-height: 24px;
                        font-size: 14px;
                    }
                }

                .toggle-primary {
                    margin-bottom: 10px;
                    .switch {
                        float: left;
                        margin-right: 20px;
                    }
                }
                form.change-primary select {
                    margin-top: 4px;
                }
            }
            .datacenter_list_container {
                padding: 0px;
                @default: #efefef; 
                @active: #23a5df;
                @universe: #f7ae41;
                @height: 40px;

                .datacenter_tab {
                    position: relative;
                    width: 100px;
                    margin: 10px 0;
                    background: @default;
                    height: @height;
                    line-height: @height;
                    padding: 0 10px;
                    a {
                        display: block;
                        cursor: pointer;
                        @color: #7e7e7e;
                        color: @color;
                        &:hover {
                            color: @color;
                            text-decoration: none;
                        }
                    }
                    .border-radius(3px);
                    
                    &.active {
                        background-color: @active;
                        border-color: @active;
                        a { 
                            @color: #fff;
                            color: @color;
                            &:hover { color: @color; }
                        }
                        .border-radius(3px 0 0 3px);
                        // chevron for the active tab
                        &:after {
                            content: " ";
                            font-size:0;
                            height:0;
                            line-height:0;
                            border-style: solid;
                            border-color: transparent;
                            border-width: @height/2 0 @height/2 @height/2;
                            border-left-color: @active;
                            position: absolute;
                            right: 0px - @height/2;
                            top:0;
                        }
                    }
                    

                    &.universe {
                        background: @universe url('images/globe-icon_white.png') 8px center no-repeat;
                        border-color: @universe;
                        color: #fcfcfc;
                        a {
                            @color: #fcfcfc;
                            color: @color;
                            &:hover { color: @color; }
                            padding-left: 24px;
                        }
                        
                        &.active:after {
                            border-left-color: @universe;
                        }
                        
                    }
                }
            }
            .datacenter_content{
                margin: 0px;
                padding-left: 10px;
                .datacenter_view{ margin: 0px 0px 0px 40px; }
                .progress_bar_full_container{
                    display: none;
                    .progress_bar_container{
                        padding: 11px 0px 10px 0px;
                        .details{
                            font-family: @sans;
                            margin: 0px;
                            font-size: 14px;
                            line-height: 20px;
                        }
                        .replicating{
                            font-family: @sans;
                            margin: 0px;
                            color: #7ec4e3;
                            font-size: 14px;
                            line-height: 20px;
                            font-weight: bold;
                        }
                        .full_bar{
                            .border-radius(5px);
                            height: 10px;
                            background: #eee;
                            .box-shadow(~"inset 1px 1px 2px #ddd");
                            .bar{
                                height: 10px;
                                .border-radius(5px);
                                background: #f7ae41;
                                .box-shadow(~"inset 1px -2px 4px #DB8812");
                            }
                        }
                    }
                }
                .dc-info {
                    padding-bottom: 14px;
                    overflow: hidden;
                    button { float: right; }

                    &:first-child {
                        border-bottom: thin solid #f0f0f0;
                    }

                    p {
                        font-family: @sans;
                        margin: 0;
                        &.caption {
                            color: #7ec4e3;
                            font-size: 14px;
                            line-height: 20px;
                        }
                        &.value {
                            color: #5c6169;
                            font-size: 24px;
                            line-height: 48px;
                        }
                        &.max-value {
                            color: #a9a9a9;
                            font-size: 11px;
                        }
                    }
                    .replica_value, .ack_value{
                        float: left;
                        width: 90px;
                    }
                    .inline_edit_input{
                        margin: 8px 0px 4px 0px;
                        width: 40px;
                        padding: 0px 4px;
                        height: 34px;
                        font-size: 20px;
                        font-family: @sans;
                    }
                    .btn{
                        margin-top: 26px;
                    }
                    .save_replicas_and_acks{ margin: 30px 0px 0px 0px; }
                    .make-primary{ margin: 10px 0px 0px 0px; }
                }
            }
        }
    }
    .section.sharding {
        h2.title {
            border-bottom: none;
            padding-bottom: 10px;
        }
        .edit-shards {
            @icon_width: 40px;
            margin: 20px 0;
            min-height: 39px;
            button { float: right; }
            .alert-error { margin-bottom: 25px; }
            .icon_paragraph {
                font-family: @sans;
                margin: 9px 0px 0px 0px;
                font-size: 15px;
                color: #a9a9a9;
                padding-left: @icon_width;
                span.big {
                    padding: 0px 6px 0px 0px;
                    font-size: 24px;
                    color: #f7ae41;
                }
                span.shard_text{
                    display: inline-block;
                    padding-top: 10px;
                }
                background: left 9px no-repeat url('images/bars-icon.png');
            }
            input.num-shards { 
                margin: -5px 6px 3px 0px;
                width: 30px;
                padding: 3px 4px;
                height: 28px;
                font-size: 20px;
                font-family: @sans;
            }
            .edit, .cancel, .rebalance{ margin: 0px 0px 0px 10px; }
            p.max-value {
                color: #a9a9a9;
                font-size: 11px;
                padding-left: @icon_width;
                margin: 0;
                line-height: 20px;
            }
        }
        .shard-graph {
            line { stroke: #dcdcdc; }
            .rect { fill: #9ad7f2; }
            text { fill: #a3a3a3; }
        }
    }
    .section.secondary_indexes{
        h2.title{
            margin-bottom: 10px;
        }
        .list_secondary_indexes{
            list-style: none;
            margin: 10px 0px 0px 0px;
            padding: 0px;
            .square_li{
                background-image: url('images/list-square-bullet.png'); 
                background-position: left center;
                background-repeat: no-repeat;
                padding: 5px 0px 5px 20px;
                font-family: @sans;
                font-size: 15px;
                color: #a9a9a9;
                .secondary_index_name{
                    margin-bottom: -1px;
                }
            }
            .input_li{
                padding: 0px 0px 0px 20px;
            }
            .alert_li{
                .alert{
                    margin-top: 5px;
                    margin-bottom: 5px;
                }
            }
        }
        .create_container{
            margin: 20px 0px 0px 0px;
            font-size: 13px;
        }
        .alert{
            margin-bottom: 0px;
        }
        .alert-on_create{
            margin-top: 7px;
            .error_detail{
                font-family: @monospace;
                font-size: 13px;
            }
        }
        .cancel_delete_btn, .delete_index_btn{
            margin: 7px 7px 0px 0px;
        }
    }
}

#datacenter-view {
    .section.list-view.server-list {
        @element_height: 40px;
        li.server {
            background: left center no-repeat url('images/server-icon.png');
            padding-left: 30px;
            .name {
                width: 375px;
                height: @element_height;
            }
            .info {
                right: 200px;
                width: 200px;
                padding-left: 30px;
                background: left center no-repeat url('images/graph-icon.png');
            }
            .status {
                right: 0;
                .label { padding-left: 23px; }
                .label-success {
                    background: left center no-repeat url('images/green-light_glow_small.png');
                }
                .label-failure {
                    background: left center no-repeat url('images/red-light_glow_small.png');
                }
            }
        }
    }
}

#server-view {
    .section.tree-view.server-data {
        @element_height: 40px;
        li.shard .shard-info {
            background: left center no-repeat url('images/server-icon.png');
            padding-left: 30px;
            .name {
                width: 455px;
                height: @element_height;
            }
            .role {
                right: 175px;
                width: 145px;
                padding-left: 30px;
                background: left center no-repeat url('images/grid-icon.png');
            }
            .num-keys {
                right: 0;
                padding-left: 35px;
                background: left center no-repeat url('images/bars-icon_server-assignments.png');
            }
        }
    }
}

/*
    ----------------------------
    Toggle switches courtesy of Thibaut Courouble (webinterfacelab.com).

    License for this toggle switch snippet (.switch class) follows:
    Copyright (c) 2012 Thibaut Courouble

    Permission is hereby granted, free of charge, to any person obtaining
    a copy of this software and associated documentation files (the
    "Software"), to deal in the Software without restriction, including
    without limitation the rights to use, copy, modify, merge, publish,
    distribute, sublicense, and/or sell copies of the Software, and to
    permit persons to whom the Software is furnished to do so, subject to
    the following conditions:

    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    ----------------------------
*/
.switch {
    @height: 24px;
    @width: 100px;
    float: left;
    position: relative;
    height: @height;
    width: @width;
    background: rgba(0, 0, 0, 0.10);
    .border-radius(3px);
    .box-shadow(~"inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1)");

    .switch-label {
        position: relative;
        z-index: 2;
        float: left;
        width: @width/2 - 2px;
        line-height: @height;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.15);
        text-align: center;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
        text-transform: uppercase;
        cursor: pointer;

        &:active { font-weight: bold; }
        &.switch-label-off { padding-left: 2px; }
        &.switch-label-on { padding-right: 2px; }
    }

    .switch-input {
        display: none;

        &:checked + .switch-label {
            font-weight: bold;
            color: rgba(0, 0, 0, 0.65);
            text-shadow: 0 1px rgba(255, 255, 255, 0.25);
            .transition(~"0.15s ease-out");
            .transition-property(color, text-shadow);
        }
        &:checked + .switch-label-on ~ .switch-selection {
            left: @width/2; /* Note: left: 50%; doesn't transition in WebKit */
        }
    }

    .switch-selection {
        position: absolute;
        z-index: 1;
        top: 2px;
        left: 2px;
        display: block;
        width: @width/2 - 2px;
        height: @height - 4px;
        .border-radius(2px);
        .box-shadow(~"inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2)");
        .transition(~"left 0.15s ease-out");
        background-color: #F7AE41;
    }
    &.switch-green { 
        background-color: #65bd63;
        .gradient(~"linear-gradient(top, #9dd993, #65bd63)");
    }
    &.switch-blue .switch-selection {
        background-color: #3aa2d0;
        .gradient(~"linear-gradient(top, #4fc9ee, #3aa2d0)");
    }
    &.switch-yellow .switch-selection {
        background-color: #c4bb61;
        .gradient(~"linear-gradient(top, #e0dd94, #c4bb61)");
    }
}

/*
    ----------------------------
    Progress bar UIComponent
    ----------------------------
*/
.replica-status, .shard-status {
    font-family: @sans;
    font-size: 15px;
    color: #72BDDF;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
    margin-bottom: 20px;
    p {
        margin: 0;
        line-height: 48px;
    }
    span.big {
        font-size: 24px;
        color: #5C6169;
    }

    .progress-status {
        p {
            color: #a9a9a9;
            line-height: normal;
            margin-bottom: 10px;
        }

        .progress {
            height: 12px;
            .border-radius(12px);
            width: 65%;
            .bar { 
                width: 100%;
                background-color: #f7ad41;
                .gradient(~"linear-gradient(bottom, rgba(247,175,67,1), rgba(249,190,103, 1))"); // gradient overlay
                .box-shadow(~"0 2px 1px rgba(0,0,0,.04), inset 0 -1px 2px rgba(0,0,0,.05)"); // drop shadow and inner shadow
            }
        }
        .stages {
            width: 30%;
            float: right;
            p {
                text-align: right;
                font-size: 13px;
                margin-bottom: 15px;
                &.completed:before {
                    content: '\2714';
                    display: block;
                    float: left;
                    font-size: 13px;
                    color: #4E9258;
                    padding-left: 10px;
                }
            }
        }
    }
}
/*
    ----------------------------
    Progress bars from Bootstrap 2.2.0
    -- note: we did not want to upgrade all of
    our dependencies to the new version of
    Bootstrap, but we needed some critical fixes
    for progress bars. To that end, the following
    styles are taken from progress-bars.less of
    v2.2.0. Remove on upgrade! TODO
    ----------------------------
*/


// ANIMATIONS
// ----------
.progress_striped(@color: #555, @angle: 45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}

// Webkit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Firefox
@-moz-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// IE9
@-ms-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Opera
@-o-keyframes progress-bar-stripes {
  from  { background-position: 0 0; }
  to    { background-position: 40px 0; }
}

// Spec
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// THE BARS
// --------

// Outer container
.progress {
  overflow: hidden;
  height: @baseLineHeight;
  margin-bottom: @baseLineHeight;
  #gradient > .vertical(#f5f5f5, #f9f9f9);
  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1)");
  .border-radius(4px);
}

// Bar of progress
.progress .bar {
  width: 0%;
  height: 100%;
  color: @white;
  float: left;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  //#gradient > .vertical(#149bdf, #0480be);
  .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.15)");
  .box-sizing(border-box);
  .transition(~"width .6s ease");
}
.progress .bar + .bar {
  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
}

// Striped bars
.progress-striped .bar {
  .progress_striped(#149bdf);
  .background-size(~"40px 40px");
}

// Call animation for the active one
.progress.active .bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

// COLORS
// ------

// Danger (red)
.progress-danger .bar, .progress .bar-danger {
  #gradient > .vertical(#ee5f5b, #c43c35);
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
  .progress_striped(#ee5f5b);
}

// Success (green)
.progress-success .bar, .progress .bar-success {
  #gradient > .vertical(#62c462, #57a957);
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
  .progress_striped(#62c462);
}

// Info (teal)
.progress-info .bar, .progress .bar-info {
  #gradient > .vertical(#5bc0de, #339bb9);
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
  .progress_striped(#5bc0de);
}

// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
  #gradient > .vertical(lighten(@orange, 15%), @orange);
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
  .progress_striped(lighten(@orange, 15%));
}

/*
    ----------------------------
    Development tools
    ----------------------------
*/
#dev-tools {
    display: none;
    #translucent > .background(#000, 0.1);
    border: thin solid #BBB;
    padding: 10px 15px 20px 30px;
    position: fixed;
    right: 0;
    width: 190px;
    z-index: 1000;
}


/*
    ----------------------------
    Updates
    ----------------------------
*/
.updates_container{
    .settings{
        display: none;
        width: 895px;
        margin: 20px auto 0px auto;
        padding: 7px 35px 7px 10px;
        .updates{
            margin-top: 6px;
            float: left;
        }
        .options_container{
            float: right;
        }
        .close{
            float: right;
        }
        .btn{
            float: right;
            padding: 4px 14px 4px;
            margin-right: 20px;
        }
        .release_link a{
            font-weight: normal;
            color: #0088cc;
        }
    }
    .changeul{
        padding: 0px;
        margin: 0px;
        list-style: none;
        .change{
            padding: 0px;
            margin: 0px 0px 0px 20px;
        }
    }
}
