.o_dashboards {
    background-color: #ececec;

    .o_website_dashboard {
        background-color: #ececec;
        padding: 16px;

        > div {
            margin-right: 0px;
            margin-left: 0px;
        }

        div.o_box {
            .clearfix();
            color: @odoo-main-color-muted;
            background-color: @odoo-view-background-color;
            background-size: cover;
            margin-bottom: @odoo-horizontal-padding;
            position: static;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
            padding: 25px 16px;

            h2, h4 {
                text-transform: uppercase;
                margin-top: 0;
            }

            h4 { margin: 0 0 0 8px; }

            h2 { color: @odoo-brand-primary; }
            
            .col-md-6 {
                padding: 15px;

                .js_field_selection {
                    width: 30%;
                    margin: 0 0 20px 0;
                    float: right;
                    border-radius: 0;
                }

                .table-responsive {
                    border: none;
                }

                table {

                    tr:nth-child(even) {
                        background: #f5f6f7;
                    }

                    th {
                        text-transform: uppercase;
                        color: @odoo-brand-optional;
                        border-top-width: 0px;
                    }
                    td, th {
                        text-align: right;
                        border-left: none;

                        &:first-child {
                            text-align: left;
                        }
                    }
                }

                /*------------------------------------------*/
                /*              Chart design                */
                /*------------------------------------------*/

                .gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] {
                    stroke: @odoo-main-color-muted !important;
                }

                svg {
                    padding-top: 2px;
                    float: left;

                    g.nvd3.nv-wrap.nv-lineChart {
                        .translate(45; 30) !important;
                    }

                    g.nv-y.nv-axis, g.nv-x.nv-axis, g.nv-y.nv-axis .nv-axisMaxMin {
                        text {
                            opacity: .3 !important;
                        }
                    }

                    g.nv-x.nv-axis .tick > line {
                        opacity: 0 !important;
                    }

                    [class*="nv-series-"] {
                        stroke-width: 3 !important;
                        fill: @odoo-main-color-muted !important;
                    }

                    .nv-groups .nv-point, g circle {
                        fill: @odoo-brand-optional;                        
                    }

                    .nv-groups .nv-point {
                        fill-opacity: 1 !important;
                        stroke-opacity: 1 !important;
                        stroke: @odoo-brand-optional;
                    }

                    .nv-groups .nv-point.hover, .nv-group.nv-noninteractive .nv-point.hover {
                        stroke: darken(@odoo-brand-optional, 10%);
                    }
                }

                .nvtooltip {
                    border-radius: 0;
                    border: 1px solid @gray-lighter;
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

                    .legend-color-guide > div {
                        border: none;
                    }
                    tr:first-child .legend-color-guide > div {
                        background-color: @odoo-brand-optional !important;
                    }
                    tr:last-child .legend-color-guide > div {
                        background-color: darken(@odoo-brand-optional, 10%) !important;
                    }
                }
            }
        }

        .o_dashboard_visits {

            .o_demo_background {

                margin-top: 16px;
                height: 300px;
                background-size: 100% !important;
                background: url("/website/static/src/img/website_dashboard_visit_demo.png");
                position: relative;

                .o_buttons {
                    position: relative;
                    z-index: 10;

                    > button {
                        display: block;
                    }
                }

                .o_layer {
                    background-color: rgba(255,255,255,.3);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }

            .o_properties_selection {

                @media (min-width: @screen-md-min) {
                    .o-flex-display();
                }

                margin-top: 10px;
                margin-bottom: 10px;
            }

            .gapi-analytics-auth-styles-signinbutton {
                cursor: pointer;
            }

            .ActiveUsers {
                position: relative;
                float: right;
                top: -60px;
                right: 10px;
                border: 1px solid @gray-lighter;
                font-weight: 300;
                white-space: nowrap;
                padding: .5em 1.5em;
                margin: .5em;
                text-transform: uppercase;
            }

            .ActiveUsers-value {
              font-weight: 300;
              margin-right: -.25em;
            }

            .ActiveUsers.is-increasing {
              animation: increase 3s;
            }

            .ActiveUsers.is-decreasing {
              animation: decrease 3s;
            }

            @keyframes increase {
              10% {
                background-color: lighten(@odoo-brand-optional, 30%);
                border-color: @odoo-brand-optional;
                color: @odoo-brand-optional;
              }
            }

            @keyframes decrease {
              10% {
                background-color: lighten(@odoo-brand-optional, 30%);
                border-color: @odoo-brand-optional;
                color: @odoo-brand-optional;
              }
            }
        }

        tr.o_product_template {
            cursor: pointer;
        }

        .o_loader {
            text-align: center;
            width: 100%;
            height: 20em;
        }
    }
}