.o_dashboards {
    background-color: #ececec;

    .o_website_dashboard {
        background-color: #ececec;
        div.o_box {
            @include clearfix;
            color: $o-main-color-muted;
            background-color: $o-view-background-color;
            background-size: cover;
            margin-top: $o-horizontal-padding;
            position: static;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

            h2, h4 {
                text-transform: uppercase;
                margin-top: 0;
                color: $o-brand-odoo;
            }

            h4 { margin: 0 0 0 8px; }

            .col-lg-7, .col-12 {
                padding: 15px;

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

                .table-responsive {
                    border: none;
                }

                table {

                    tr:first-child {
                        background: white;
                    }

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

                    th {
                        text-transform: uppercase;
                        color: $o-main-text-color;
                        border-top-width: 0px;
                    }
                    td, th {
                        text-align: right;
                        border-left: none;

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

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

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

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

                    g.nvd3.nv-wrap.nv-lineChart {
                        transform: translate(45, 30); // FIXME was marked important before scss convertion
                    }

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

                    .nv-groups {
                        .nv-series-0 {
                            stroke-width: 3 !important;
                            .nv-point {
                                stroke: $o-brand-primary;
                                stroke-opacity: 1 !important;
                                &.hover {
                                    stroke: darken($o-brand-primary, 10%);
                                }
                            }
                        }
                        .nv-series-1 {
                            .nv-point {
                                stroke: $o-main-color-muted !important;
                                stroke-opacity: 1 !important;
                                &.hover {
                                    stroke: darken($o-main-color-muted, 10%);
                                }
                            }
                        }
                    }
                }

                .nvtooltip {
                    border-radius: 0;
                    border: 1px solid gray('200');
                    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: $o-brand-primary !important;
                    }
                    tr:last-child .legend-color-guide > div {
                        background-color: darken($o-brand-lightsecondary, 10%) !important;
                    }
                }
            }
        }

        .o_dashboard_common {
            .o_box {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                > .o_inner_box {
                    @include media-breakpoint-down(sm) {
                        flex: 1 1 200px;
                        display: block !important;
                    }
                    @include media-breakpoint-up(md) {
                        flex: 0 0 16.6%;
                    }
                }
            }
            .o_inner_box {
                padding-top: 10px;
                text-align: center;
                border: 1px solid $o-view-background-color;
                height: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                color: white;
                background-color: $o-brand-primary;
                    &:hover {
                        background-color: darken($o-brand-primary, 10%);
                    }
                &.o_primary {
                    background-color: $o-brand-odoo;
                    color: white;
                    &:hover {
                        background-color: darken($o-brand-odoo, 10%);
                    }
                }
                .o_highlight {
                    font-size: 27px;
                }
            }
        }

        .o_graph_sales {
            direction: ltr#{"/*rtl:ignore*/"};
            .o_legend0 {
                background-color: $o-brand-primary;
            }
            .o_legend1 {
                background-color: $o-main-color-muted;
            }
        }

        .o_dashboard_visits {

            h2 {
                padding: 15px;
            }

            .o_demo_background {

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

                .o_buttons {
                    position: relative;

                    > 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 {

                @include media-breakpoint-up(lg) {
                    display: flex;
                }

                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('200');
                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($o-brand-primary, 30%);
                border-color: $o-brand-primary;
                color: $o-brand-primary;
              }
            }

            @keyframes decrease {
              10% {
                background-color: lighten($o-brand-primary, 30%);
                border-color: $o-brand-primary;
                color: $o-brand-primary;
              }
            }
        }

        tr.o_product_template {
            cursor: pointer;
            color: $o-main-text-color;
        }

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