Minor design update

Minor design update

@import "lesshat";

/*********************************
kshf library

Copyright (c) 20014-2015, University of Maryland
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the name of the University of Maryland nor the names of its contributors
  may not be used to endorse or promote products derived from this software
  without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

************************************ */

@layout_animation: ~'transform 700ms ease-in-out, background-color 250ms ease-in-out';
@bar_animation: ~'transform 700ms ease-in-out, background-color 100ms linear, opacity 200ms linear';

@color_bars: #B8C7D2; //#B0BFCA; //#98ABB9; //#8699A8;
@color_filtered: #30B8C4;
@color_bars_selected: darken(orangered, 10%); //#CC2320;
@color_bars_background: #DEE2E6;
@color_related: lighten(orangered, 10%); //#B2B227;
@color_facet_arrow: rgb(231, 215, 97);
@color_facet_group: #E9E5CB;
@color_bar_preview: orangered;
@color_preview_compare: darkslategray; //#222222;
@color_axis_line: rgb(182, 179, 179);
@color_item_count: #969DA3;;

@color_query_and: #1D4870;
@color_query_or:  #1C737A;
@color_query_not: gray;

@color_listHeader_background: rgb(239, 234, 223);

.kshf {
//    border: solid 1px lightgray;
//    background-color: white;
//    &:hover{ box-shadow: 0px 0px 4px gray; }
//    &:focus{ outline: none; }
    position: relative; left: 0px;
    .transition(~'left 300ms ease-in-out');
    .box-sizing(border-box);
    *{
        .box-sizing(border-box);
    }
    &[noanim=false]{
        .aggr{
            .transition(@bar_animation);
        }
        .chartAxis_Measure .tick{
            .transition(~'transform 500ms ease-out');
        }
        .attrib{
            .transition(~'all 700ms ease-in-out');
        }
        .wrapper{
            .transition(~'height 700ms ease-in-out');
        }
        .panels_Above{
            .transition(~'height 700ms ease-in-out');
        }
    }
    &[attribsShown=true]{
        left: 120px;
        .attributeList{
            display: block;
        }
        .listHeader {
            > .configRow{
                display: block;
            }
        }
        .summaryTitle:hover{
            > .summaryTitle_editButton{
                opacity: 1;
                pointer-events: all;
            }
        }
        .headerGroup > .header_display_control > .fa-remove{
            display: inline-block;
        }
    }
    &[percentview=true]{
        .chartAxis_Measure {
            > .percentSign::after{
                content: "%";
            }
        }
    }
    &[showdropzone=true]{
        &:not([dropattrtype~="unique"]){
            .panel[hassummaries="true"] > .dropZone{
                display: block;
                cursor: s-resize;
            }
            .panel[hassummaries="false"] > .dropZone_panel{
                display: block;
                cursor: s-resize;
            }
        }
        &[dropattrtype~="interval"] .dropZone_resultSort{
            display: block !important;
        }
        &[dropattrtype~="categorical"][dropattrtype~="singlevalue"] .dropZone_textSearch{
            display: block !important;
        }
    }
    &[ratiomode=true]{
        .chartAxis_Measure {
            > .tick > .text::after{
                content: "%";
            }
        }
    }
    &[previewcompare="true"]{
        .compare{
            opacity: 1 !important;
        }
        .compareLine{
            opacity: 1 !important;
        }
    }
    &[isfiltered=true] {
        .listHeader .filterClearAll{
            opacity: 1;
            pointer-events: all;
        }
    }

    .compareButton{
        display: block;
        position: absolute;
        font-size: 0.7em;
        color: gray;
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
        .transition(~'opacity 500ms ease-in-out');
        &:after{
            content: "\f13e";
        }
        &:hover:after{
            content: "\f023";
        }
        &[inside]{
            color: white;
            text-shadow: 0px 0px 1px rgb(0, 0, 0);
        }
    }
    span[showlock="true"]{
        .compareButton{
            pointer-events: all;
            opacity: 1;
        }
    }
    span[compare="true"]{
        .compareButton{
            pointer-events: all;
            opacity: 1;
            &:not([inside]){
                color: @color_preview_compare;
            }
            &:after{
                content: "\f023";
            }
            &:hover:after{
                content: "\f13e";
            }
        }
    }

    .unitName{
        opacity: 0.6;
        margin-left: 1px;
    }

    .sortButton{
        cursor: pointer;
        &:hover{
            color:orangered
        }
        &:before{
            content: "\f161";
        }
        &[inverse='true']:before{
            content: "\f160";
        }
    }

    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility; // People say this has big performance drawbacks
    display: block;

    // Used only in breadcrumb display
    .AndOrNot{
        color: white;
        display: inline-block;
        font-weight: 300;
        font-size: 0.8em;
        vertical-align: top;
        border-radius: 3px;
        padding: 0px 2px 0px 2px;
        margin-top: 1px;
        opacity: 0.7;
        &.AndOrNot_And{
            background-color: @color_query_and;
        }
        &.AndOrNot_Or{
            background-color: @color_query_or;
        }
        &.AndOrNot_Not{
            background-color: @color_query_not;
        }
    }
    .noselect {
        .user-select(none);
    }

    .attributeList{
        display: none;
        position: absolute;
        overflow: auto;

        left: -220px;
        width: 215px;
        top: 5px;
        height: 100%;

        > .attributeName{
            font-size: 0.8em;
            padding: 2px;
            margin: 2px;
            min-height: 36px;
            border-radius: 3px;
            background-color: rgb(232, 232, 232);
            border: solid 1px lightgray;
            cursor: pointer;
            .user-select(none);
            > .summaryTitle{
                display: inline;
            }
            > .editTitleButton{
                font-size: 0.8em;
                display: none;
                color:gray;
                vertical-align: middle;
                margin: 2px;
                vertical-align: top;
                &:hover{
                    color: orangered;
                }
            }
            > .summaryTitleEdit{
                width: calc(~"100% - 20px");
                display: none;
                border-width: 0px;
                background-color: rgba(250,250,250,0.9);
                color: orangered;
                &:focus{
                    outline-color: #cb5454;
                    outline-width: 0px;
                }
                &:hover{
                    border-width: 0px;
                    background-color: white;
                    margin: 0px;
                }
                &::-webkit-input-placeholder {
                    font-weight: 500;
                    color: #cb5454;
                }
            }
            > .summaryTypeIcon{
                float: right;
            }
            .nuggetInfo{
                display: inline-block;
                width: 100%;
                .flex(1);
                .align-self(center);
                font-weight: 500;
                font-size: 0.7em;
                vertical-align: top;
                text-align: center;
                > .num_left{
                    float:left;
                    margin-left:2px;
                }
                > .num_right{
                    float:right;
                    margin-right:2px;
                }
                > .fa{
                    color: gray;
                }
            }
            &[aggr_initialized=false]{
                > .attribNugget {
                    > .nuggetInfo{
                        font-size: 2em;
                        text-align: center;
                        position: relative;
                        &:before{
                            content: "\f110"; // spinner
                        }
                    }
                    > .nuggetViz{
                        display: none !important;
                    }
                    &:hover{
                        > .nuggetInfo{
                            -webkit-animation: fa-spin 2s infinite linear;
                            animation: fa-spin 2s infinite linear;
                        }
                    }
                }
            }
            > .attribNugget{
                .display(flex);
                height: 30px;
                background-color: rgba(255,255,255,0.8);
                width: 50px;
                float: right;
                width: 60px;
                border-radius: 5px;
                border: solid 1px rgba(255,255,255,0.8);
                &:hover{
                    border-color: gray;
                }
                > .nuggetViz{
                    .flex(1);
                    height: 30px;
                    margin-right: 3px;
                    margin-left: 3px;
                    > .nuggetBar{
                        .flex(1);
                        display: block;
                        background-color: @color_bars;
                    }
                }
            }
            &:hover{
                background-color: #E8E0CE;
                border-color: #B8B6B1;
                > .editTitleButton{
                    display: inline-block;
                }
            }
            &[edittitle="true"]{
                > .summaryTitle{
                    display: none;
                }
                > .summaryTitleEdit{
                    display: inline-block;
                }
                > .editTitleButton{
                    &::before{ content: "\f00c"; }
                }
            }
            &[state='edited']{
                > .editTitleButton{
                    display: inline-block;
                }
            }
            &[datatype~="interval"]{
                > .attribNugget{
                    .flex-direction(column);
                    > .nuggetViz{
                        .display(flex);
                        .flex-direction(row);
                        > .nuggetBar{
                            .align-self(flex-end);
                        }
                    }
                }
                .nuggetViz{ .order(1); }
                .nuggetInfo{ .order(2); max-height: 1em; }
            }
            &[datatype~='time']{
                .nuggetInfo{
                    &:before {
                        content: '\f017'; // fa-clock-o
                    }
                }
            }
            &[datatype~="categorical"]{
                > .attribNugget{
                    .flex-direction(row);
                    > .nuggetViz{
                        .display(flex);
                        .flex-direction(column);
                    }
                }
            }
            &[state='custom']{
                > .editTitleButton{
                    display: inline-block;
                    font-size: 0.9em;
                    color: black;
                    &:before{ content: "\f121"; } // Code
                }
            }
        }
        > .attributeListHeader{
            font-weight: 700;
        }
    }

    .panels_Above{
        .display(flex);
        .flex-direction(row);
    }

    .attribDragBox{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 22px;
        width: 200px;
        background-color: lightgray;
        border-radius: 10px;
        border: double 3px gray;
        display: none;
        z-index: 200;
        text-align: center;
        font-weight: 500;
        font-size: 0.8em;
        cursor: default;
        text-rendering: initial;
        pointer-events: none;
    }

    .panel {
        > .dropZone{
            .flex(1);
            display: none;
            background-color: rgb(240, 240, 240);
            border-radius: 10px;
            border-style: solid;
            border-color: gray;
            border-width: 2px;
            z-index: 50;
            margin: 2px;
            &:hover{ background-color: rgb(255, 188, 163); }
            &[readyToDrop="true"] {
                background-color: rgb(255, 188, 163);
                border-color: orangered;
            }
        }
        > .dropZone_panel{
            display: none;
            background-color: rgba(200, 200, 200, 0.3);
            border-color: gray;
            border-style: solid;
            border-width: 0px;
            // border-radius: 10px; // Set depending on the pane;
            z-index: 50;
            position: absolute;
            &:hover{ background-color: rgb(255, 188, 163); }
        }
        .dropIcon{
            margin: 0px auto;
            position: relative;
            display: block;
            font-size: 1.3em;
            pointer-events: none;
            text-align: center;
        }
        .dropZone[readyToDrop=true] .dropIcon{
            color: orangered;
        }
        &[hidebars=true] .kshf {
            .attrib .aggr_Group{ display:none; }
        }
        &[hidebaraxis=true] {
            .facetCategorical{
                .chartAxis_Measure{ display:none; }
                .barChartMainInfo{ display:none; }
            }
        }
        > .panelAdjustWidth{
            display: none;
            position: absolute;
            pointer-events: all;
            height: 100%;
            width: 0px;
            top: 0px;
            // border-bottom: solid 1px lightgray;
            // border-top: solid 1px lightgray;
            border-width: 0px 2px 0px 0px;
            border-style: dotted;
            border-color: lightgray;
            cursor: col-resize;
            // .background-image(~"linear-gradient(right, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 1) 40%, rgba(12, 12, 12, 1) 50%, rgba(230, 230, 230, 1) 60%, rgba(230, 230, 230, 0) 100%)");
            opacity: 0.5;
            z-index: 10;
            &:hover{
                // border-bottom: solid 1px gray;
                // border-top: solid 1px gray;
                border-width: 0px 2px 0px 0px;
                border-style: dotted;
                border-color: gray;
                // .background-image(~"linear-gradient(right, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 1) 40%, rgba(101, 101, 101, 1) 50%, rgba(150, 150, 150, 1) 60%, rgba(150, 150, 150, 0) 100%);");
            }
        }
        &.panel_bottom{
            .display(inline-flex);
            .flex-direction(column);
            width: 100%;
            > .dropZone_panel{
                bottom: -30px;
                height: 30px;
                width: 100%;
                border-radius: 0px 0px 40px 40px;
                border-bottom-width: 2px;
                border-top-width: 1px;
            }
        }
        &.panel_left{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            height: 100%;
            > .dropZone_panel{
                left: 0px;
                height: 100%;
                top: 0%;
                width: 30px;
                border-radius: 0px 40px 40px 0px;
                border-right-width: 2px;
                border-left-width: 1px;
            }
            > .panelAdjustWidth{
                right: -2px;
            }
        }
        &.panel_right{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            height: 100%;
            > .dropZone_panel{
                right: 0px;
                height: 100%;
                top: 0%;
                width: 30px;
                border-radius: 40px 0px 0px 40px;
                border-left-width: 2px;
                border-right-width: 1px;
            }
            > .panelAdjustWidth{
                left: -2px;
            }
        }
        &.panel_middle{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            flex: 1;
            > .dropZone_panel{
                bottom: 0px;
                height: 30px;
                width: 100%;
                border-radius: 40px 40px 0px 0px;
                border-top-width: 2px;
                border-bottom-width: 1px;
            }
        }
        &.panel_resize{
            position: absolute;
            right: 0px;
            bottom: 0px;
            cursor: nwse-resize;
            width: 0;
            height: 0;
            z-index: 10;
            border-left: 16px solid transparent;
            border-right: 16px solid lightgray;
            border-top: 16px solid transparent;
            :hover{ border-right: 16px solid gray; }
        }
        &.panel_infobox {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 2000;
            transform: scale(1);
            text-align: center;
            .transition(~'transform 500ms ease-in-out, opacity 500ms');

            .keyframes(~'itemZoom, 0%{transform: scale(0); opacity:1;} 100% {transform: scale(1); opacity:1;}');

            .infobox_close_button{
                position: absolute;
                right: 3px;
                top: 3px;
                background-color: rgb(151, 151, 151);
                width: 20px;
                height: 20px;
                border-radius: 20px;
                text-align: center;
                cursor: pointer;
                line-height: 20px;
                color: white;
                &:hover{ background-color: rgb(111, 111, 111); }
            }
            // DONT MESS WITH THIS
            > .background{
                width: 100%;
                height: 100%;
                z-index: -2;
                background: #0b0b0b;
                opacity: 0.8;
                position: absolute;
                .transition(~'all 0.5s');
                border-radius: 20px;
            }
            > .infobox_content{
                display: none;
                margin: auto;
                box-shadow: 0px 0px 20px gray;
                border-radius:15px;
                background-color:white;
                opacity: 1.0;
                z-index: 1043;
                max-height: 90%;
                max-width: 90%;
                overflow-y: auto;
                overflow-x: hidden;
            }

            > .infobox_loading{
                width: 300px;
                height: 35px;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                .loadinggg{
                    position: absolute;
                    top: 8px;
                    left: 10px;
                    i.fa-warning{
                        margin-left: 20px;
                        font-size: 1.5em;
                    }
                }
                div.status_text{
                    margin: auto;
                    position: absolute;
                    top: 10px;
                    left: 70px;
                    height:20px;
                    > .status_text_sub{
                        margin-left:5px;
                    }
                }
            }
            > .infobox_credit{
                display:none;
                width: 390px;
                height: 260px;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                div.all-the-credits{
                    margin: auto;
                }
                div.header{
                    background-color:rgb(216, 221, 212);
                    width:100%;
                    padding-top: 5px;
                    border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    border-bottom: solid 2px rgb(60, 94, 67);
                }
                span.libName{
                    font-size: 1.4em;
                    font-weight: 700;
                }
                div.project_fund {
                    font-size: 0.8em;
                    font-weight: 300;
                }
            }
            > .infobox_itemZoom{
                position: relative;
                margin: 20px;
                padding: 10px;
            }
            &[show=loading] > .infobox_loading{
                display: inline-block;
            }
            &[show=credit] > .infobox_credit{
                display: inline-block;
            }
            &[show=none]{
                pointer-events: none;
                //display: none;
                > .background{ opacity: 0;}
            }
            &[show=itemZoom] {
                > .infobox_itemZoom{
                    .animation(itemZoom 500ms forwards);
                    .animation-iteration-count(1);
                    .animation-timing-function(ease-in-out);
                    display: inline-block;
                }
            }
        } // panel_infobox
    }

    .hasLabelWidth{ text-align: right; }
    .attribGroup{
        direction:ltr;
    }
    .attrib{
        // add background to the text area when an item is selected
        &:not([selected="0"]) {
            .attribLabel{
                .background-image(~"linear-gradient(left, rgba(220,220,220,0) 0%, rgba(220,220,220,1) 20px)");
            }
            .item_count_wrapper{
                .background-image(~"linear-gradient(left, rgba(220,220,220,1) 0%, rgba(220,220,220,0) 100%)");
            }
        }
    }
    .kshfChart[collapsed=true] {
        > .headerGroup > .header_display_control{
            > .fa-collapse{
                opacity: 1;
                &:hover{
                    //.animation-direction(reverse);
                }
                &::before{ content: "\f065"; }
            }
        }
    }
    .belowAttribs{ direction: ltr; }

    .subFacets{
        .kshfChart{ margin-left: 17px; }
    }
    .facetCategorical{
        .scrollToTop{
            right: 3px;
        }
    }
    //}

    .chartFilterButtonParent{
        //position: absolute;
        //left: -18px;
    }
    .chartClearFilterButton{
        width: 14px;
        height: 100%;

        display: inline-block;
        cursor: pointer;

        font-weight: 700;
        font-size: 11px;

        text-align: center;

        .transition(~"background-color 100ms linear,color 100ms linear, opacity 400ms");

        background-color: #635d46;
        color: #eeebe0;
        border: solid 1px #635d46;
        &:hover{
            background-color: #B6AF96;
            color: #635d46;
        }

        &.alone{
            display: none;
            vertical-align: top;
            pointer-events: all;
            box-shadow: 1px 1px 1px #474940;
        }
        &.summary{
            display: inline-block;
            position: absolute;
            right: 0px;
            margin-left: 2px;
            line-height: 0.9em;
        }
        &.allFilter{
            display: inline-block;
            float: right;
            margin-left: 2px;
            height: 16px;
        }
    }

    .selection_bar rect{
        fill: #788890;
        fill-opacity: 0;
        cursor: col-resize;
        stroke-width:1.5;
        pointer-events: none;
        &:hover { stroke: orangered; }
    }

    .chartAxis_Measure {
        pointer-events: none;
        position:absolute;
        z-index: 2;
        top: 0px;
        .transition(@layout_animation);
        > .tick{
            opacity: 0;
            position:absolute;
            > .text{
                display: block;
                position: relative;
                text-align: center;
                font-size: 0.6em;
                font-weight: 300;
                line-height: 9px;
                cursor: default;
                color: gray;
            }
            > .line{
                display: block;
                position: absolute;
            }
        }
        > .percentSign{
            pointer-events: all;
            position: absolute;
            color: gray;
            font-size: 0.7em;
            font-weight: 700;
            cursor: pointer;
            &:after{
                content: '#';
            }
            &:hover{
                color: orangered;
            }
        }
        > .background{
            position: absolute;
            left: 0px;
            top: 0px;
            cursor: pointer;
            pointer-events: all;
            background-color: rgb(194, 146, 124);
            opacity: 0;
            &:hover{
                opacity: 0.1;
            }
        }
    }

    .border_line{
        position: relative;
        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0) 0%, rgba(190, 190, 190, 1) 10%, rgba(190, 190, 190, 1) 90%, rgba(190, 190, 190, 0) 100%);");
        height: 1px;
        margin-bottom: -2px;
        pointer-events: all;
        top: -1px;
        &.border_line_bottom{
            //position: absolute;
            width: 100%;
            height: 1px;
            margin-bottom: 0px;
            //top: calc(100% - 1px);
        }
    }

    .headerGroup{
        position: relative;
        text-align: center;
        padding-top: 1px;
//        background-color: #E7E6E6;
        border-radius: 3px;
//        border: solid 1px gray;
//        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0) 0%, rgba(190, 190, 190, 0.3) 10%, rgba(190, 190, 190, 0.3) 90%, rgba(190, 190, 190, 0) 100%);");
        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0.2) 0%, rgba(190, 190, 190, 0.4) 20%, rgba(190, 190, 190, 0.4) 80%, rgba(190, 190, 190, 0.2) 100%);");
        .summaryTitle {
            display: block;
            font-weight: 700;
            cursor: default;
            font-variant: small-caps;
            padding-top: 1px;
            padding-bottom: 1px;
            line-height: 1em;
            text-rendering: initial;
            white-space: nowrap;
            text-align: center;
            margin: 0 auto;
            min-height: 18px;
            /*white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;*/
            > .summaryTitle_text{
                display: inline-block;
                max-width: 70%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: -4px;
            }
            > .summaryTitle_edit{
                display: none;
                //width: calc(~"100% - 50px");
                border-width: 0px;
                background-color: rgba(250,250,250,0.9);
                color: orangered;
                text-align: center;
                &:focus{
                    outline-color: #cb5454;
                    outline-width: 0px;
                }
                &:hover{
                    border-width: 0px;
                    background-color: white;
                    margin: 0px;
                }
                &::-webkit-input-placeholder {
                    font-weight: 500;
                    color: #cb5454;
                }
            }
            > .summaryTitle_editButton{
                display: inline-block;
                position: relative;
                font-size: 0.7em;
                color: gray;
                cursor: pointer;
                vertical-align: top;
                margin-left: 3px;
                margin-top: 2px;
                opacity: 0;
                pointer-events: none;
                &:before{
                    content: '\f040';
                }
                &:hover{
                    color: black;
                }
            }
            &[edittitle="true"]{
                > .summaryTitle_text{
                    display: none;
                }
                > .summaryTitle_edit{
                    display: inline-block;
                }
                > .summaryTitle_editButton{
                    opacity: 1;
                    pointer-events: all;
                    &:before{
                        content: "\f00c";
                    }
                }
            }
        }
        .save_filter_as_set{
            display: none;
            position: absolute;
            cursor: pointer;
            margin-left: 4px;
            margin-top: 1px;
            width: 15px;
            color: gray;
            &:hover{
                color: black;
            }
        }
        .chartClearFilterButton.rowFilter{
            pointer-events: all;
            height: 14px;
            width: 14px;
            line-height: 13px;
            margin-right: 3px;
        }
        span.facetIcons{
            font-size: 0.8em;
            color: gray;
            position: absolute;
            right: 3px;
            top: 1px;
            .fa{
                cursor: pointer;
                margin-left: 2px;
                &:hover{ color:black; }
            }
            .hasMultiMappings{
                display: none;
            }
            span.isLinkedMark{
            }
            .facetDescription{
                cursor: default;
            }
        }
        > .header_display_control{
            display: block;
            position: absolute;
            top: 0px;
            z-index: 10;
            .transition(~'color 250ms linear, opacity 100ms linear ');
            .transform-origin(50% 50%);
            > .fa{
                display: inline-block;
                opacity: 0;
                color: black;
                cursor: pointer;
                margin-right: 2px;
                font-size: 0.8em;
                width: 14px;
                height: 14px;
                width: 13px;
                height: 13px;
                &:hover{ color:#cb5454; }
            }
/*            > .fa-collapse:hover{
                .animation(shrink 800ms);
                .animation-iteration-count(infinite);
                .animation-timing-function(ease-in);
            }*/
            > .fa-collapse{
                &::before{ content: "\f066"; }
            }
            > .fa-remove{
                display: none;
            }
            > .expandButton{
                display: none;
            }
        }
        span.showFilterText{
            display: inline-block;
            float: left;
            pointer-events: all;
        }
    } // headerGroup

    .aggr{
        display: block;
        position: absolute;
        background-color: @color_bars;
        .transform-origin(0% 0%);
        &.active{
            cursor: pointer;
            pointer-events: all;
        }
        &.total{
            background-color: @color_bars_background;
            pointer-events: none;
        }
        &.preview{
            background-color: @color_related;
            pointer-events: none;
            .transform(~'scaleX(0)');
            &[fast]{
                .transition(~'transform 200ms ease-in-out');
            }
        }
        &.compare{
            background-color: @color_preview_compare;
            pointer-events: none;
            .transition(~'opacity 400ms ease-in-out, transform 200ms ease-in-out');
            opacity: 0;
        }
    }

    .kshfChart{
        display: block;
        border-radius: 6px;
        position: relative;
        // overflow: hidden; // Keep it this way! -- Why?

        > .wrapper{
            position: relative;
            overflow: hidden;
            // so that absolute positioned elements will not overflow
        }

        > .wrapper{
            > .facetCategorical{
                overflow: hidden;
                > .facetControls{
                    border-bottom: dotted 1px lightgray;
                    margin-bottom: -1px;
                    position: relative;
                    display: none;
                    > .attribTextSearch{
                        display: none;
                        vertical-align: top;
                        white-space:nowrap;
                        position: relative;
                        cursor: text;
                        > .attribTextSearchInput {
                            display: block;
                            width: 100%;
                            height: 15px;
                            font-size: 0.7em;
                            font-weight: 700;
                            border-width: 0px;
                            // border-bottom: dashed 1px #cb5454;
                            color: #cb5454;
                            background-color:rgba(244, 244, 244,0);
                            pointer-events: all;
                            margin: 0px;
                            cursor:text;
                            text-align: right;

                            &:focus{
                                outline-color: gray;
                                outline-width: 4px;
                            }
                            &:hover{
                                border: solid 1px #cb5454;
                                padding: 0px 0px 0px 0px;
                                //background-color: white;
                            }
                            &::-webkit-input-placeholder {
                                font-weight: 500;
                                color: #cb5454;
                                text-align:right;
                            }
                            &:focus::-webkit-input-placeholder {
                                color: #F3CDCD;
                            }
                            &:hover::-webkit-input-placeholder {
                                color: #F3CDCD;
                            }
                        }
                        > .attribTextSearchControl{
                            position: absolute;
                            top: 2px;
                            left: 1px;
                            padding-left: 1px;
                            font-size: 0.7em;
                            pointer-events: none;
                            color: #cb5454;
                            // Search icon
                            &:before{
                                content: "\f002";
                            }
                            &[showClear=true]{
                                cursor: pointer;
                                pointer-events: all;
                                color: gray;
                                &:hover{
                                    color: #cb5454;
                                }
                                &:before{
                                    content: "\f057";
                                }
                            }
                        }
                    } // attribTextSearch

                    .sortButton{
                        position: absolute;
                        bottom: 1px;
                        font-size: 0.7em;
                        text-align: right;
                        &:hover{
                            color:orangered
                        }
                        &:before{
                            content: "\f161";
                        }
                        &[inverse='true']:before{
                            content: "\f160";
                        }
                    }

                    > .sortOptionSelectGroup{
                        display: block;
                        vertical-align: top;
                        white-space:nowrap;
                        position: relative;
                        font-weight: 300;
                        > .optionSelect{
                            width: 100%;
                            heigh: 16px;
                            font-size: 0.7em;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            background: transparent;
                            appearance: none;
                            font-weight: 300;
                            border-width: 0px;
                            cursor: pointer;
                            padding-right: 0px;
                            margin: 0px;
                            vertical-align: middle;
//                            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='15px'><polyline points='0,2 10,2, 5,11'/></svg>") no-repeat top right;
                            &:hover{
                                color: orangered;
                            }
                        }
                    }
                } // facetControls

                .scrollToTop{
                    margin-top: -13px;
                    font-size: 0.8em;
                    pointer-events: all;
                    position: absolute;
                }
                .selectAllAttribsButton{
                    font-size: 0.6em;
                    float: left;
                    margin-left: 2px;
                    font-weight: 300;
                    color: black;
                    border: solid 1px lightgray;
                    border-radius: 10px;
                    padding: 1px 5px 0px 5px;
                    background-color: rgba(150,150,100,0.2);
                    cursor: pointer;
                    &:hover{
    //                    font-weight: 500;
                        box-shadow: 0px 0px 1px black;
                    }
                    &::before{
                        content: '+ Add Filter with All';
                    }
                }
                .scroll_display_more{
                    font-size: 0.7em;
                    line-height: 1.4em;
                    vertical-align: top;
                    font-style:italic;
                    cursor: pointer;
                    color: rgb(145, 145, 145);
                    opacity:1;
                    pointer-events: all;
                    display: inline-block;
                    padding-top: 2px;
                    &:hover{ color: #cb5454; }
                }

                > .attribGroup{
                    position:relative;
                    overflow-y: auto;
                    overflow-x: hidden;
                    display: block;
                    pointer-events: all;
                    z-index: 5;
                    .transition(~'height 700ms ease-in-out');

                    > .chartBackground{
                        opacity: 0;
                        width: 1px;
                        display: block;
                        .transition(~'opacity 250ms');
                    }

                    > .attrib{
                        display: block;
                        position: absolute;
                        white-space: nowrap;
                        top: 0px;
                        height: 16px;
                        > .clickArea{
                            position: absolute;
                            left: 0px;
                            z-index: 20;
                            display: inline-block;
                            vertical-align: top;
                            pointer-events: all;
                            // Note: The height of clickable area is the same as height of the bar!
                            margin-top:4px;
                            margin-bottom:4px;
                            height: 10px !important; // total: 18px
                            position: absolute;
                            font-size: 0.8em;
                            font-weight: 300;
                            width: 1px;
                            left: 0px;
                        }
                        .compareButton{
                            width: 9px;
                            text-align: right;
                            top: 4px;
                            z-index: 300;
                            &[inside]{
                                margin-left: -11px;
                            }
                        }
                        > .attribLabel{
                            position: absolute;
                            display: inline-block;
                            vertical-align: top;
                            line-height: 18px;
                            pointer-events: none;
                            z-index: 21;

                            font-size: 0.8em;
                            font-weight: 300;
                            cursor: default;
                            // display ... when text is too long
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            > .theLabel{
                                // And/Or/Not can come before...
                                &:before{
                                    color: white;
                                    font-weight: 300;
                                    font-size: 0.7em;
                                    vertical-align: top;
                                    border-radius: 3px;
                                    padding: 1px 2px 0px 2px;
                                    margin: 0px 2px;
                                    opacity: 0.4;
                                }
                                .AndOrNot{
                                    display: inline;
                                }
                            }
                        }
                        > .item_count_wrapper{
                            position: absolute;
                            display: inline-block;
                            vertical-align: top;
                            line-height: 18px;
                            pointer-events: none;

                            font-size: 0.7em;
                            pointer-events: none;

                            padding-right: 1px;
                            text-align: right;
                        }
                        > .aggr_Group{
                            display: inline-block;
                            vertical-align: top;
                            pointer-events: none;
                            position: relative;
                            pointer-events: none;
                            .aggr{
                                .transform-origin(0%, 0%);
                                top: 4px;
                                width: 1px;
                                height: 10px;
                                &.total_tip{
                                    right: -5px;
                                    /* right arrow */
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 5px solid @color_bars_background;
                                    background-color: initial;
                                    /*
                                    // The sawtooth pattern
                                    width: 8px;
                                    left: 0px;
                                    height: 10px;
                                    top: 4px;
                                    opacity: 0px;

                                    background: linear-gradient(-135deg, transparent 75%, @color_bars_background 75%) 0 50%,
                                    linear-gradient(-45deg, transparent 75%, @color_bars_background 75%) 0 50%;

                                    background-position: top left, top left;
                                    background-repeat: repeat;
                                    background-size: 8px 8px;
                                    */
                                }
                                &.compare{
                                    width: 1px;
                                    height: 5px;
                                }
                            }
                        }
                        .filterButtons{
                            white-space: nowrap;
                            cursor: pointer;
                            vertical-align: top;
                            //float: left;
                            z-index: 100;
//                            margin-bottom: -2px;
//                            font-size: 1.1em;
                            pointer-events: all;
                            > .filterButton{
                                display: none;
                                pointer-events: all;
                                margin-right: 2px;
                                border-radius: 4px;
                                vertical-align: middle;
                                padding: 1px 2px 0px 3px;
                                line-height: 13px;
                                color: white;
                                font-weight: 300;
                                font-size: 0.7em;
                            }
                            > .orButton {
                                background-color: lighten(@color_query_or, 10%);
                                &:hover { background-color: @color_query_or; }
                                &:before{ content: "Or"; }
                            }
                            > .notButton {
                                background-color: rgb(166, 166, 166);
                                &:before{ content: "Not"; }
                                &:hover { background-color: gray; }
                            }
                        }

                        &[activeItems='0'] {
                            .measureLabel{
                                visibility: hidden;
                            }
                        }

                        &[compare="true"] {
                            > .attribLabel > .theLabel{
                                font-weight: 700;
                            }
                        }
                        &:not([selected="0"]) {
                            > .attribLabel > .theLabel{
                                font-weight: 700;
                            }
                            .clickArea{ cursor: pointer; }
                        }
                        // AND
                        &[selected="1"]{
                            > .attribLabel > .theLabel{ color: @color_query_and; }
/*                            &[show-box=true]{
                                > .attribLabel > .theLabel:before{
                                    content: "And";
                                    background-color: @color_query_and;
                                }
                            }*/
                        }
                        // OR
                        &[selected="2"]{
                            > .attribLabel > .theLabel{ color: @color_query_or; }
                            &[show-box=true]{
                                > .attribLabel > .filterButtons > .orButton {
                                    display: inline;
                                }
                            }
                        }
                        // NOT
                        &[selected="-1"]{
                            /*
                            > .attribLabel > .theLabel{
                                color: @color_query_not;
                                &:before{
                                    content: "Not";
                                    background-color: @color_query_not;
                                }
                            }
                            */
                            > .attribLabel > .theLabel{
                                color: @color_query_not;
                            }
                            > .attribLabel > .filterButtons > .notButton{
                                display: inline;
                                background-color: @color_query_not;
                            }
                        }

                        &[noitems=false]{
                            &[highlight^="selected"] {
                                > .attribLabel > .theLabel{
                                    font-weight: 700 !important;
                                }
                                // Not selected
                                &[selected="0"] {
                                    .clickArea { cursor: pointer; }
                                    &[selecttype="and"] > .attribLabel > .theLabel{
                                        color: @color_query_and;
                                    }
                                    &[selecttype="or"] > .attribLabel > .theLabel{
                                        color: @color_query_or;
                                    }
                                    &[selecttype="not"] > .attribLabel > .theLabel{
                                        color: @color_query_not;
                                    }
                                }
                            }
                            &[highlight=true] {
                                > .attribLabel > .theLabel{
                                    color: @color_related;
                                    font-weight: 700;
                                }
                            }
                        }
                        &[noitems=true] {
                            color:gray;
                            .measureLabel{ display: none; }
                        }
                    } // .attrib
                } // .attribGroup
            }// facetCategorical

            > .facetInterval {
                padding: 7px 11px 0px 6px;
                overflow: hidden;
                &[istime="true"]{
                    span.aggr{
                        opacity: 0 !important;
                    }
                }
                > .histogram{
                    position:relative;
                    pointer-events: all;
//                    overflow-x: hidden;
//                    overflow-y: visible;
                    .transition(~'height 700ms ease-in-out');
                    > .timeSVG{
                        .lineTrend.total{
                            fill: #EEF0F2;
                            stroke: none;
                            stroke-width: 1.5px;
                        }
                        .lineTrend.active{
                            fill: lighten(@color_bars, 10%);
                            stroke: @color_bars;
                            stroke-width: 1.5px;
                        }
                        .activeLine{
                            stroke: @color_bars;
                            stroke-width: 2px;
                        }
                        .lineTrend.preview{
                            fill: fadeout(@color_bar_preview,70%);
                            stroke: @color_bar_preview;
                            stroke-width: 2px;
                            opacity: 0;
                            .transition(~'opacity 500ms linear');
                        }
                        .previewLine{
                            stroke: @color_bar_preview;
                            stroke-width: 2px;
                            opacity: 0;
                        }
                        .lineTrend.compare{
                            fill: none;
                            stroke: @color_preview_compare;
                            stroke-width: 1.5px;
                            opacity: 0;
                            .transition(~'opacity 500ms linear');
                        }
                        .compareLine{
                            stroke: @color_preview_compare;
                            stroke-width: 2px;
                            opacity: 0;
                        }
                    }
                    > .bins{
                        position: absolute;
                        top: 0px;
                        // If this is set, it prevents background events from the other div layer
//                        width: 100%;
//                        height: 100%;
                        z-index: 3;
                        height: 100%;
                        .transition(@layout_animation);
                        > .aggr_Group{
                            position: absolute;
                            display: block;
                            height: 100%;
                            pointer-events: none;
                            > .aggr{
                                width: 1px;
                                height: 1px;
                                .transform-origin(0% 100%);
                                &.total_tip{
                                    content: " ";
                                    display: block;
                                    position: absolute;
                                    top: -7px;
                                    width: 100%;
                                    left: 0px;
                                    height: 8px;
                                    opacity: 0;

                                    background: linear-gradient(-135deg, transparent 75%, @color_bars_background 75%) 0 50%,
                                    linear-gradient(135deg, transparent 75%, @color_bars_background 75%) 0 50%;

                                    background-position: top left, top left;
                                    background-repeat: repeat;
                                    background-size: 8px 8px;
                                }
                            }
                            > .compareButton{
                                position: absolute;
                                width: 100%;
                                text-align: center;
                                &[inside]{
                                    margin-top: 12px;
                                }
                            }
                            > .measureLabel{
                                // top: 1px;
                                display: block;
                                position: relative;
                                width:100%;
                                font-size: 0.7em;
                                text-align: center;
                                cursor: pointer;
                                pointer-events: all;
                                .transition(~'transform 700ms ease-in-out');
                            }
                            &[noitems=true] {
                                > .measureLabel{ display: none; }
                            }
                        }
                    }
                    > .chartAxis_Measure {
                        top: 0px;
                        width: 100%;
                        height: 100%;
                        > .percentSign{
                            bottom: 0px;
                            left: 0px;
                            width: 20px;
                            text-align: right;
                        }
                        > .background{
                            width: 20px;
                            height: calc(~"100% - 12px");
                            top: -6px;
                        }
                        > .tick{
                            width: 100%;
                            > .line{
                                border-bottom: dotted 1px @color_axis_line;
                                width: 100%;
                                left: 0px;
                            }
                            > .text{
                                width: 25px;
                                left: -25px;
                                text-align: right;
                                top: -3px;
                                position: relative;
                            }
                        }
                    }

                }
                > .percentileGroup{
                    height: 12px;
                    margin-top: 1px;
                    position: relative;
                    border-style: solid;
                    border-color: lightgray;
                    border-width: 1px 0px;
                    > .percentileTitle{
                        font-size: 0.6em;
                        position: absolute;
                        display: inline-block;
                        font-weight: 300;
                        top: 0px;
                        left: -9px;
                        text-shadow: 0px 0px 2px white;
                        z-index: 120;
                        color: gray;
                        pointer-events: none;
                        display: none;
                    }
                    &:hover > .percentileTitle{
                        display: block;
                    }
                    > .quantile {
                        display: inline-block;
                        position: absolute;
                        height: 10px;
                        width:1px;
                        .transition(~'transform 700ms ease-in-out');
                        .transform-origin(0% 0%);
                        &.q_pos{
                            background-color: rgb(27, 111, 97);
                            margin-left: -0.5px;
                            z-index: 101;
                            pointer-events: none;
                            &.q_50 {
                                width: 4px;
                                background-color: rgb(27, 111, 97);
                                margin-left: -2px;
                                pointer-events: all;
                            }
                        }
                        &.q_range{
                            &:hover{
                                border-color: rgb(27, 111, 97);
                                border-style: solid;
                                border-width: 1px 0px 1px 0px;
                                z-index: 100;
                            }
                        }
                        &.q_40_60 {
                            background-color: lighten(rgb(27, 111, 97), 15%);
                        }
                        &.q_30_70 {
                            background-color: lighten(rgb(27, 111, 97), 40%);
                        }
                        &.q_20_80 {
                            background-color: lighten(rgb(27, 111, 97), 60%);
                        }
                        &.q_10_90 {
                            background-color: lighten(rgb(27, 111, 97), 70%);
                        }
                    }
                } // percentileGroup
                > .intervalSlider{
                    position:relative;
                    pointer-events: all;
                    > .controlLine {
                        height: 11px;
                        > .selectedItemValue{
                            position:absolute;
                            z-index: 20;
                            top: 1px;
                            display: none;
                            .transition(~'all 450ms ease-in-out');
                            > .circlee{
                                display: block;
                                border-radius: 20px;
                                width: 8px;
                                height: 8px;
                                background-color: orangered;
                                left: -4px;
                                position: relative;
                            }
                            > .selected-item-value-text{
                                position: relative;
                                top: 0px;
                                color: orangered;
                                font-size: 0.8em;
                                white-space: nowrap;
                                > .selected-item-value-text-v{
                                    position: relative;
                                    left: -50%;
                                    top: -2px;
                                    background-color: white;
                                    border-radius: 4px;
                                    border: solid 1px #DDDDDD;
                                    padding: 0px 1px;
                                    font-size: 0.9em;
                                }
                            }
                        }
                        > .base{
                            display: block;
                            position: absolute;
                            box-shadow: inset 0px 0px 2px gray;
                            .transform-origin(0% 0%);
                            &.total{
                                width: 100%;
                                height: 3px;
                                top: 3px;
                                cursor: ew-resize;
                                background-color: lightgray;
                            }
                            &.active{
                                height: 8px;
                                top: 1px;
                                width:1px;
                                display:none;
                                &[filtered=true]{
                                    display: block;
                                    cursor: col-resize;
                                    background-color: @color_filtered;
                                }
                                &:hover{
                                    background-color: orangered !important;
                                }
                            }
                        }
                        > .handle{
                            display:block;
                            position:absolute;
                            width:6px;
                            height:8px;
                            background-color: white;
                            border-width: 1px;
                            border-color: black;
                            border-style: solid;
                            cursor: ew-resize;
                            z-index: 10;
                            top:1px;
                            &:hover{
                                background-color: orangered !important;
                            }
                            &.min{
                                left: -5px;
                                border-top-left-radius: 10px;
                                border-bottom-left-radius: 10px;
                            }
                            &.max{
                                border-top-right-radius: 10px;
                                border-bottom-right-radius: 10px;
                            }
                            > .invalidArea{
                                position: relative;
                                display: block;
                                background-color: lightgray;
                                opacity: 0.3;
                            }
                            &.min > .invalidArea{
                                border-right: double 3px black;
                            }
                            &.max > .invalidArea{
                                border-left: double 3px black;
                            }
                        }
                        &[filtered=false]{
                            span.invalidArea{
                                display: none;
                            }
                        }
                        &[anim=true]{
                            > .base {
                                .transition(@bar_animation);
                            }
                            > .handle{
                                .transition(@bar_animation);
                            }
                        }
                    }
                    > .labelGroup{
                        cursor: default;
                        position:relative;
                        > .tick{
                            position:absolute;
                            > .text{
                                top: -1px;
                                font-size: 0.7em;
                                font-weight: 300;
                                position: relative;
                                left: -50%;
                                display: block;
                                text-align: center;
                                white-space: nowrap;
                            }
                            > .line{
                                position: absolute;
                                top: -10px;
                                height: 10px;
                                border-left: solid 1px rgb(160, 160, 160);
                                display: block;
                            }
                        }
                    } // labelGroup
                    /*
                    &[scaletype="log"] > .labelGroup > .tick > .line{
                        top: -22px;
                        height: 22px;
                    }
                    &[scaletype="linear"] > .labelGroup > .tick > .line{
                        top: -22px;
                        height: 22px;
                    }
                    */
                } // intervalSlider

            } // facetInterval
        } //

        .subFacets {
            position:relative;
            height: 100%;
        } // subFacets

        .facetGroupBar{
            display: inline-block;
            position: absolute;
            height: 100%;
            width: 17px;
            border-right: solid 2px rgb(204,195,195);
            //background-color: @color_facet_group;
            .background-image(~"linear-gradient(left, rgba(204,195,195,0) 0%, rgba(204,195,195,0.5) 100%)");
            > .facetGroupBarSub{
                height: 100%;
                width: 1px;
                margin: auto;
                background-color: black;
            }
        }

        &[collapsed=true]{
            > .headerGroup{
                // color: gray;
                .summaryTitle{
                    cursor: pointer;
                }
            }
            > .wrapper .facetCategorical{
                > .facetControls { display: none; }
                > .scrollToTop { display: none; }
                > .attribGroup { display: none; }
                > .belowAttribs { display: none; }
            }
            > .wrapper .facetInterval{
                > .histogram { display: none; }
                > .intervalSlider { display: none; }
            }
        }

        &[filtered=true] > .headerGroup {
            .chartClearFilterButton{
                display: inline-block;
            }
        }
        &:not([filtered_total="0"]):not([filtered_total="1"])[hasmultivalueitem=true]{
            > .headerGroup {
                .save_filter_as_set{
                    // display: inline-block;
                }
            }
        }
        &[hasmultivalueitem=false]{
            &[filtered_or="0"][filtered_and="0"]{
                > .wrapper > .facetCategorical > .attribGroup > .attrib:hover {
                    &[selected="0"] .notButton{
                        display: inline;
                    }
                }
            }
            &[filtered_or="0"]{
                > .wrapper > .facetCategorical > .attribGroup > .attrib:hover {
                    &[selected="-1"] {
                        cursor: pointer;
                    }
                }
            }
        }
        &:not([filtered_or="0"]){
            > .wrapper > .facetCategorical > .attribGroup > .attrib[selected="0"]:hover .orButton{
                display: inline;
            }
        }
        &:not([filtered_and="0"]){
            > .wrapper > .facetCategorical > .attribGroup > .attrib[selected="0"]:hover .orButton{
                display: inline;
            }
        }
        &[hasmultivalueitem=true]{
            > .wrapper > .facetCategorical > .attribGroup > .attrib {
                &[selected="0"] &[highlight="selected"] .notButton{
                    display: inline;
                }
            }
            > .headerGroup .hasMultiMappings{
                display: inline-block;
            }
        }
        &[filtered_range=true] .chartClearFilterButton.rangeFilter{
            display:inline-block;
        }

        &[refreshSorting="true"]{
            .sortButton:before{
                content: "\f175" !important;
            }
        }

/*        &:before{
            content:''; width:100%; height:100%;
            position:absolute; top:0; left:0;
            pointer-events:none;
        }*/

        &:hover{
//            margin: -1px;
//            border: solid 1px gray;
            > .headerGroup > .header_display_control > .fa{
                opacity: 1;
            }
            &[hasmultivalueitem=true] {
                > .headerGroup .hasMultiMappings{
                    display: inline-block;
                }
            }
        }

        &[hasFacets=true]{
            //border-top: double 3px #87868B;
            //margin-bottom: 2px;
//            padding-top: 3px;
            > .headerGroup {
                .background-image(~"linear-gradient(right, rgba(151, 151, 151, 0.2) 0%, rgba(151, 151, 151, 0.4) 20%, rgba(151, 151, 151, 0.4) 80%, rgba(151, 151, 151, 0.2) 100%);");
                .summaryTitle{
                    font-size: 1.3em;
                }
            }
        }
    }// kshfChart

    .belowAttribs{
        position:relative;
        height: 18px;
        .border_line{
            opacity: 0.6;
        }
        > .chartAxis_Measure {
            > .percentSign{
                right: 2px;
            }
            > .background{
                height: 15px;
            }
            > .tick{
                > .text{
                    width: 20px;
                    left: -10px;
                    top: 2px;
                    .transition(~'top 700ms ease-in-out');
                }
                > .line{
                    width: 0px;
                    border-left: dotted 1px @color_axis_line;
                    .transition(~'top 700ms ease-in-out, height 700ms ease-in-out');
                }
            }
        }
    }

    .measureLabel{
        color: @color_item_count;
    }
    &[resultpreview="true"] .measureLabel{
        color: orangered;
    }

    &[resultpreview="true"]{
        .lineTrend.preview{
            opacity: 1 !important;
        }
        .previewLine{
            opacity: 1 !important;
        }
    }

    .selectVertLine {
        display: inline-block;
        background-color: #EEDDDE;
        width:2px;
        display:none;
        position:absolute;
    }

    .loading_dots {
        width: 10px;
        height: 10px;
        background: gray;
        border-radius: 50px;
        margin: 4px;
        display: inline-block;
        &[anim]{
            //background: black;
            .animation(fade 900ms forwards);
            .animation-iteration-count(infinite);
            &.loading_dots_1 {
            }
            &.loading_dots_2 {
                .animation-delay(300ms)
            }
            &.loading_dots_3 {
                .animation-delay(600ms)
            }
        }
    }

    .middleColumn{
        .display(inline-flex);
        .flex-direction(column);
        .flex(1);
    }

    .listDiv{
        // position: absolute; // exact position is calculated by keshif
        // box-shadow: 2px 2px 2px rgb(150, 134, 73);
        position: relative;
        top: 0px;
        overflow: hidden; // Don't remove!
        display: inline-block;
        .transition(~'margin-top 700ms ease-in-out');
        > .listItemGroup{
            width: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            border-style: solid;
            border-color: rgb(223, 210, 169);
            border-width: 0px 2px 2px 2px;

            background-color: white;
            // height is set dynamically by JavaScript
            .transition(~'height 700ms ease-in-out');

            > .listItem{
                opacity: 1;
                cursor: default;
                overflow: hidden;
                vertical-align: top;
                padding: 1px 0px;
                position: relative;
                .transition(~"opacity 500ms ease");

                > .itemRank{
                    display: none;
                    font-size: 0.6em;
                    color: gray;
                    font-weight: 300;
                    font-style: italic;
                    text-align: right;
                }

                > .content{
                    vertical-align: top;
                    border: solid 0px lightgray;
                    position: relative;

                    > .iteminfo{
                        float:none;
                        clear: left;
                        font-weight:normal;
                        margin-bottom: 2px;
                    }
                    > .iteminfo_0{
                        font-size:1.0em;
                        color: black;
                    }
                    > .iteminfo_1{
                        font-size:0.9em;
                        color: #555555;
                    }
                    > .iteminfo_2{
                        font-size:0.8em;
                        color: #555555;
                        font-style:italic;
                        font-weight:300;
                    }
                    > .iteminfo_3{
                        font-size:0.8em;
                        color: rgb(167, 31, 31);
                        font-style:italic;
                        font-weight:300;
                    }
                }
                > .itemToggleDetails{
                    display: none;
                    vertical-align: top;
                    width:18px; // includes the padding, using box model...
                    cursor: pointer;
                    font-weight: 700;
                    > .item_details_toggle{
                        .transition(~'transform 500ms');
                        color: gray;
                        position: relative;
                        &:hover{ color:black; }
                    }
                }
                > .itemLinkStateColumn{
                    vertical-align: top;
                    display: table-cell;
    //                float: right;
                    text-align: right;
                    vertical-align: top;
                    white-space: nowrap;
                    padding-right: 2px;
                    > .itemLinkIcon{
                        font-size: 0.9em;
                        display: none;
                        cursor: pointer;
                        margin-right: 2px;
                    }
                    > .measureLabel{
                        font-size: 0.6em;
                        vertical-align: middle;
                    }
                    > .itemSelectCheckbox{
                        cursor: pointer;
                        width: 14px;
                        text-align: left;
                        display: inline-block;
                        font-size: 0.8em;
                        padding-left: 2px;
                        font: normal normal normal 14px/1 FontAwesome;
                        text-rendering: auto;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        color: gray;
                        &:hover {color: orangered;}
                    }
                }

                &[animst=open]{
                    opacity: 0;
                }
                &[animst=closed]{
                    max-height: 0px !important;
                    padding: 0px !important;
                    opacity: 0;
                }
                &[animst=visible]{
                    display: block;
                }

                &[details=true]{
                    max-height: none;
                    .item_details_toggle{
                        display:inline-block;
                        .rotate(180deg);
                    }
                    .item_details{
                        display:block;
                    }
                }
                &[details=false]{
                    .item_details_toggle{
                        display:block;
                    }
                    .item_details{
                        display:none;
                    }
                }

                &[highlight^="selected"]{
                    box-shadow: inset 0px 0px 2px black; //@color_bars_selected;
                    &[selectedForLink=true]{
                        .background-image(~"linear-gradient(right, rgba(255,193,157,1), rgba(255,193,157,0) 30px, rgba(255,193,157,0) 100%)");
                        > .itemLinkStateColumn > .itemLinkIcon{
                            display: inline;
                            color: @color_bars_selected;
                            &:hover{
                                color: orangered;
                            }
                        }
                    }
                }
                &[highlight=true]{
                    box-shadow: inset 0px 0px 5px #BBBBBB;
                    background-color: #F8F8F8;
                    > .itemLinkStateColumn > .itemLinkIcon{
                        display: inline;
                        color: gray;
                    }
        //            .background-image(~"linear-gradient(left, #ff6a33 0%, #F2F2F2 50px, #F2F2F2 100%)");
        //            box-shadow: inset 0px 0px 4px @color_related;
                }
                &[selectedForLink=true] .itemLinkStateColumn > .itemSelectCheckbox:before{
                    content: "\f046"; // checked
                }
                &[selectedForLink=false] .itemLinkStateColumn > .itemSelectCheckbox:before{
                    content: "\f096"; // unchecked
                }
            } // listItem
        } // listItemGroup

        > .showMore{
            cursor: pointer;
            border: solid 1px lightgray;
            border-radius: 9px;

            padding: 0px;
            box-shadow: 2px 2px 2px #D8D8D8;
            font-weight: 300;
            font-size: 0.8em;
            background-color: #eee;
            height: 20px;
            width: calc(~"100% - 23px");

            text-align: center;
            position:absolute;
            left: 4px;
            //bottom: -25px;
            .transition(~"bottom 700ms ease 50ms");
            .keyframes(~'fade, 0%{opacity:1;} 50%{opacity:0;} 100% {opacity:1;}');

            > .MoreText{
                display:inline-block;
                vertical-align: top;
                top: 2px;
                position: relative;
            }
            > .Count{
                font-size: 0.9em;
                top: 3px;
                position: relative;
                color:gray;
                &.CountAbove{
                    float:left;
                    margin-left: 3px;
                }
                &.CountBelow{
                    float:right;
                    margin-right: 3px;
                }
            }

            &:hover{
                //background-color: darken(lightgray,0%);
                box-shadow: 2px 2px 2px gray;
                span.MoreText{
                    text-decoration: underline;
                }
            }
        }
        select.listSortOptionSelect{
            bottom:0px;
        }
        &[showRank=true]{
            .itemRank{
                display: inline-block !important;
            }
            > .listHeader > .configRow > .itemRank{
                // color: orangered; // Does not look nice...
            }
            .adjustSortColumnWidth{
                margin-left: 13px;
            }
        }

        &[displaytype="grid"] {
            > .listItemGroup {
                .display(flex);
                .flex-direction(row);
                .flex-wrap(wrap);
                justify-content: space-around;
                -webkit-justify-content: space-around;
                > .listItem{
                    display: block;
                    .align-self(flex-start);
                    > .itemRank{
                        vertical-align: top;
                        margin-right: 2px;
                    }
                    > .content{
                        display: block;
                    }
                    > .itemToggleDetails{
                        display: block;
                        position: absolute;
                        z-index: 10;
                    }
                }
            }
        }
        &[displaytype="list"] {
            > .listHeader > .configRow > .adjustSortColumnWidth >.handle{
                display: block;
            }
            > .listItemGroup{
                > .listItem{
                    .display(flex);
                    .flex-direction(row);
                    width: 100%;
                    > .listSortColumn{
                        padding-right: 3px;
                        padding-top: 2px;
                        font-weight: 300;
                        text-align: right;
                        font-size: 0.8em;
                        cursor: default;
                        vertical-align: top;

                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    > .itemRank{
                        float: left;
                        margin-top: 4px;
                        width: 13px;
                    }
                    > .itemToggleDetails{
                        width: 18px;
                        padding-top: 2px;
                        text-align: center;
                    }
                    > .content{
                        .flex(1);
                    }
                }
            }
            &[detailsToggle="zoom"] {
                > .listItemGroup > .listItem > .itemToggleDetails{
                    display: inline-block;
                }
            }
            &[detailsToggle="one"] {
                > .listItemGroup > .listItem > .itemToggleDetails{
                    display: inline-block;
                    > .item_details_toggle:before{
                        content: "\f078";
                    }
                }
            }
        }
        &[detailsToggle="zoom"] {
            > .listItemGroup > .listItem > .itemToggleDetails > .item_details_toggle:before{
                content: "\f140";
            }
        }
    } // div.listDiv

    .scrollToTop{
        display:inline-block;
        visibility: hidden;
        color: red;
        cursor: pointer;
        color: #aaaaaa;
        .transition(~'color 300ms ease-in-out');
        &:hover{
            color:#cb5454;
        }
    }

    .listHeader{
        font-weight: bold;
        color: black;
        font-size: 0.9em;
        position: relative;
        border-style: solid;
        border-color: #dfd2a9;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-width: 0px 2px;
        // .background-image(~"linear-gradient(bottom, rgb(229, 222, 200) 0%, rgb(246, 243, 235) 80%)");
        background-color: @color_listHeader_background;
        .totalViz{
            height: 3px;
            margin-top: 1px;
            margin-bottom: 1px;
            position:relative;
            > .aggr{
                cursor: default !important;
                left: 0px;
                top: 0px;
                height: 100%;
                .transition(~'all 200ms ease-in-out');

                &.total{
                    width: 100%;
                }
                &.preview{
                    transform: inherit;
                }
            }
        }
        > .bottomRow{
            .display(flex);
            .flex-direction(row);
            min-height: 18px;
            > .itemRank{
                display: none;
                width: 13px;
                text-align: right;
                font-weight: 100;
                font-size: 0.9em;
                &:before{
                    content: "#";
                }
            }
            > .header_listSortColumn{
                .align-self(flex-end);
                white-space: nowrap;
                text-align: right;
                padding-right: 1px;
                position: relative;
                > .sortColumnName{
                    font-weight: 300;
                    font-size: 0.9em;
                    margin: 0px 0px 1px 3px;
                    display: inline-block;
                    cursor: default;
                    .user-select(none);
                }
                > .dropZone_resultSort{
                    display: none;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 50;
                    background-color: rgba(234, 234, 234, 1);
                    border-radius: 5px;
                    border-style: solid;
                    border-width: 2px;
                    border-color: gray;
                    text-align: center;
                    > .dropZone_resultSort_text{
                        pointer-events: none;
                        font-size: 0.8em;
                        display: block;
                        font-weight: 300;
                    }
                    &:hover{
                        background-color: rgb(255, 188, 163);
                    }
                }
            }
            > .sortColumn {
                .align-self(flex-end);
                width: 17px;
                font-size: 0.8em;
                margin-bottom: 2px;
                vertical-align: bottom;
                > .sortButton{
                    padding: 2px;
                }
            }
            > .scrollToTop{
                vertical-align: bottom;
                text-align: right;
                width: 15px;
//                    float: right;
//                    height: 100%;
//                    margin-bottom: -3px;
            }

            > .headerLinkStateColumn{
                font-size: 1.1em;
                text-align: right;
                width: 85px;
                > .linkAll{
                    > .fa-link{
                        cursor: pointer;
                        font-size: 0.9em;
                    }
                    > .headerLinkColumnAllResults{
                        cursor: pointer;
                        margin-right: 2px;
                        font-size: 0.8em;
                        font-weight: 300;
                        font-family: sans-serif;
                    }
                    &:hover{ color: orangered; }
                }

                > .linkTitleText{
/*                        font-size: 0.8em;
                    font-variant: small-caps;
                    font-weight: 300;
                    cursor: default;*/
                    display: block;
                    font-size: 1.0em;
                    font-weight: 700;
                    cursor: default;
                    font-variant: small-caps;
                    pointer-events: all;
                    height: 16px;
                    margin-left: 2px;
                }
            }
            > .filtercrumbs{
                .flex(1);
                font-size: 0.9em;
                vertical-align: top;
                > .filter-block{
                    display: inline-block;
                    position: relative;
                    cursor: pointer;
                    color: rgb(37, 33, 18);
                    font-weight: 300;
                    // border: 1px rgb(104, 91, 43) solid;
                    box-shadow: 1px 1px 1px rgb(78, 71, 43);
                    background-color: rgba(255,255,255,0.5);
                    margin-right: 5px;
                    padding-left: 2px;
                    max-width: 0px;
                    .transition(~"all 250ms linear");
                    > .sdsdsds{
                        pointer-events: none;
                        /*
                        max-width: 300px;
                        max-width: 300px;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;*/
                        display: block;
                        // margin-right: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        > .filterHeader{
                            padding: 1px;
                            font-size: 0.9em;
                            font-weight: 700;
                            &:after{
                                content: ': ';
                            }
                        }
                        > .filterDetails{
                            padding:1px 0px 1px 0px;
                            display: inline;
                            margin-right: 15px;
                        }
                    }
                    > .chartClearFilterButton.summary{
                        pointer-events: none;
                    }
                    &[ready=true]{
        //                opacity: 1;
                        max-width: 100%;
                    }
                    &[ready=false]{
        //                opacity: 1;
                        max-width: 0px;
                        .chartClearFilterButton{
                            display:none;
                        }
                    }
                    &:hover{
                        background-color: rgba(255,255,255,1.0);
                        .sdsdsds{
                            text-decoration: line-through;
                        }
                        .chartClearFilterButton{
                            background-color: #B6AF96;
                            color: #635d46;
                        }
                    }
                    b{ font-weight: 700; }
                    &[filtered=false]{ display: none; }
                }
            }
        } // bottomRow

        > .configRow{
            display: none;
            height: 18px;
            position: relative;
            border-top: dotted 1px rgb(153, 147, 131);
            background-color: rgb(229, 226, 218);
            > .itemRank{
                display: inline-block;
                position: absolute;
                width: 13px;
                text-align: right;
                z-index: 10;
                cursor: pointer;
                color: gray;
                .user-select(none);
                > .fa:before{
                    content: "\f102";
                }
                &:hover{
                    color: black;
                }
            }
            > .adjustSortColumnWidth{
                display: inline-block;
                position: relative;
                height: 100%;
                text-align: center;
                > .handle{
                    display: none;
                    position: absolute;
                    right: 0px;
                    cursor: ew-resize;
                    top: 0px;
                    height: 100%;
                    width: 3px;
                    border-left: solid 1px gray;
                    border-right: solid 1px gray;
                }
                >.removeSortOption{
                    cursor: pointer;
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    color:gray;
                    &:before{
                        content: "\f00d";
                    }
                    &:hover{
                        color: black;
                    }
                }
            }
        }// configRow

        .filterClearAll{
            opacity: 0;
            pointer-events: none;
            .align-self(center);
            right: 41px;
            top: 0px;
            cursor: pointer;
            color: #252112;
            font-weight: 300;
            border: 1px #685b2b solid;
            background-color: #E9E2CE;
            padding-left: 1px;
            .transition(~"background-color 100ms linear, opacity 300ms linear");
            &:hover{
                background-color: white;
                box-shadow: none;
            }
            .title{
                font-size: 0.8em;
                padding-left: 1px;
                vertical-align: middle;
            }
        }

        > .topRow {
            .display(flex);
            .flex-direction(row);
            > .resultInfo{
                vertical-align: top;
                display: block;
                white-space: nowrap;
                pointer-events: none;
                font-size: 1.5em;
                font-weight: 700;
                text-shadow: 1px 1px lightgray;
                margin-bottom: -3px;

                .listHeader_count{
                    display: inline-block;
                    text-align: right;
                    // min-width: 50px;
                    vertical-align: top;
                    margin-right: 4px;
                }
                .listHeader_itemName{
                    margin-right: 4px;
                }
            }
            > .mainTextSearch {
                .flex(1);
                .align-self(flex-end);
                white-space: nowrap;
                display: inline-block;
                vertical-align: bottom;
                position: relative;
                height: 18px;
                > .dropZone_textSearch{
                    display: none;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 50;
                    background-color: rgba(234, 234, 234, 1);
                    border-radius: 5px;
                    border-style: solid;
                    border-width: 2px;
                    border-color: gray;
                    text-align: center;
                    > .dropZone_textSearch_text{
                        pointer-events: none;
                        font-size: 0.7em;
                        display: block;
                        font-weight: 300;
                    }
                    &:hover{
                        background-color: rgb(255, 188, 163);
                    }
                }
                > .mainTextSearch_input{
                    display: none;
                    font-size: 0.8em;
                    font-weight: 700;
                    color: #cb5454;
                    padding: 0px 2px;
                    background-color:rgba(255, 255, 255, 0);
                    pointer-events: all;
                    border-width:0px;
                    border-style: solid;
                    border-color: #cb5454;
                    margin: 1px;
                    width: calc(~"100% - 17px");
                    &:focus{
                        outline-color: #cb5454;
                        outline-width: 1px;
                    }
                    &:hover{
                        border-width: 1px;
                        background-color: white;
                        margin: 0px;
                        //padding: 0px 1px;
                        //margin: 0px 1px;
        //                padding: 0px 0px 1px 0px;
                    }
                    &::-webkit-input-placeholder{
                        color: #cb5454;
                        font-weight: 300;
                    }
                    &:focus::-webkit-input-placeholder{
                        color: #F3CDCD;
                    }
                }
                > .searchIcon{
                    display: none;
                    padding-left: 1px;
                    color: #cb5454;
                }
                > .clearText{
                    display: none;
                    position: absolute;
                    right: 4px;
                    top: 1px;
                    cursor: pointer;
                    color:gray;
                    &:hover{
                        color: #cb5454;
                    }
                }
                &[isActive="true"]{
                    > .mainTextSearch_input{
                        display: inline-block;
                    }
                    > .searchIcon{
                        display: inline-block;
                    }
                }
            } // mainTextSearch

            > .rightBoxes{
                right: 0px;
                top: -1px;
                font-size: 1.3em;
                color: #635d46;
                text-align: right;
                white-space: nowrap;
                .fa{
                    cursor: pointer;
                    margin-left: 2px;
                    &:hover{ color: #cb5454; }
                }
                .showConfigButton{
                    &:hover{
                        animation: fa-spin 2s infinite linear;
                        -webkit-animation: fa-spin 2s infinite linear;
                    }
                }
                .datasource{
                    display: none;
                    cursor: pointer;
                    text-decoration: none;
                    color: #635d46; // if dom type is a, it will show visited links in different color
                }
            }

        } // topRow
    } // listHeader

    .boxinbox{
        margin-top:10px;
        &:hover{
            background-color: #EFEFEF;
        }
        ul{
            margin: 5px 0px 5px 0px;
        }
        &.features{
            width:500px;
            text-align:left;
            border: solid 0px lightgray;
            box-shadow: 0px 0px 0px gray;
            .credits_features {
                margin-top: 4px;
                padding-left: 20px;
            }
        }
        &.project_credits{
            font-size: 0.9em;
            font-style: italic;
            a.myName{
                display: inline-block;
                margin: 17px 10px;
                vertical-align: top;
                color: black;
                font-weight: 700;
                font-style: normal;
                text-decoration: none;
            }
        }
        &.project_3rdparty img{
            position:relative;
        }
    } // boxinbox
}

.tipsy {
    font-size: 10px;
    position: absolute;
    padding: 5px;
    z-index: 100000;
    pointer-events: none;
    .tipsy-inner {
        font-family: Helvetica, Arial, sans-serif;
        padding: 3px;
        font-size: 1.2em;
        background-color: #000;
        color: #FFF;
        max-width: 200px;
        text-align: center;
        font-weight: 300px;
        border-radius: 3px;
    }
    .tipsy-inner{
        span.big{
            font-size: 1.4em;
        }
        span.action{
            font-weight: 700;
        }
    }
    &.tipsyFilterAnd{
        .tipsy-inner{
            background-color: @color_query_and;
        }
        .tipsy-arrow{
            border-color: @color_query_and;
        }
    }
    &.tipsyFilterOr{
        .tipsy-inner{
            background-color: @color_query_or;
        }
        .tipsy-arrow{
            border-color: @color_query_or;
        }
    }
    &.tipsyFilterNot{
        .tipsy-inner{
            background-color: @color_query_not;
        }
        .tipsy-arrow{
            border-color: @color_query_not;
        }
    }
    &.tipsyFilterLock{
        .tipsy-inner{
            background-color: @color_preview_compare;
        }
        .tipsy-arrow{
            border-color: @color_preview_compare;
        }
    }

}

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent !important; border-right-color: transparent !important;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent !important; border-right-color: transparent !important;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent !important; border-bottom-color: transparent !important; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent !important; border-bottom-color: transparent !important; }

.mixi-frames () {
    from { .transform(scale(1) )}
    to { .transform(scale(0.5) )}
}
@-webkit-keyframes shrink {.mixi-frames;}
@-moz-keyframes shrink {.mixi-frames;}
@-ms-keyframes shrink {.mixi-frames;}
@-o-keyframes shrink {.mixi-frames;}
@keyframes shrink {.mixi-frames;}

@import "lesshat";

/*********************************
kshf library

Copyright (c) 20014-2015, University of Maryland
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the name of the University of Maryland nor the names of its contributors
  may not be used to endorse or promote products derived from this software
  without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

************************************ */

@layout_animation: ~'transform 700ms ease-in-out, background-color 250ms ease-in-out';
@bar_animation: ~'transform 700ms ease-in-out, background-color 100ms linear, opacity 200ms linear';

@color_bars: #B8C7D2; //#B0BFCA; //#98ABB9; //#8699A8;
@color_filtered: #30B8C4;
@color_bars_selected: darken(orangered, 10%); //#CC2320;
@color_bars_background: #DEE2E6;
@color_related: lighten(orangered, 10%); //#B2B227;
@color_facet_arrow: rgb(231, 215, 97);
@color_facet_group: #E9E5CB;
@color_bar_preview: orangered;
@color_preview_compare: darkslategray; //#222222;
@color_axis_line: rgb(182, 179, 179);
@color_item_count: #969DA3;;

@color_query_and: #1D4870;
@color_query_or:  #1C737A;
@color_query_not: gray;

@color_listHeader_background: rgb(239, 234, 223);

.kshf {
//    border: solid 1px lightgray;
//    background-color: white;
//    &:hover{ box-shadow: 0px 0px 4px gray; }
//    &:focus{ outline: none; }
    position: relative; left: 0px;
    .transition(~'left 300ms ease-in-out');
    .box-sizing(border-box);
    *{
        .box-sizing(border-box);
    }
    &[noanim=false]{
        .aggr{
            .transition(@bar_animation);
        }
        .chartAxis_Measure .tick{
            .transition(~'transform 500ms ease-out');
        }
        .attrib{
            .transition(~'all 700ms ease-in-out');
        }
        .wrapper{
            .transition(~'height 700ms ease-in-out');
        }
        .panels_Above{
            .transition(~'height 700ms ease-in-out');
        }
    }
    &[attribsShown=true]{
        left: 120px;
        .attributeList{
            display: block;
        }
        .listHeader {
            > .configRow{
                display: block;
            }
        }
        .summaryTitle:hover{
            > .summaryTitle_editButton{
                opacity: 1;
                pointer-events: all;
            }
        }
        .headerGroup > .header_display_control > .fa-remove{
            display: inline-block;
        }
    }
    &[percentview=true]{
        .chartAxis_Measure {
            > .percentSign::after{
                content: "%";
            }
        }
    }
    &[showdropzone=true]{
        &:not([dropattrtype~="unique"]){
            .panel[hassummaries="true"] > .dropZone{
                display: block;
                cursor: s-resize;
            }
            .panel[hassummaries="false"] > .dropZone_panel{
                display: block;
                cursor: s-resize;
            }
        }
        &[dropattrtype~="interval"] .dropZone_resultSort{
            display: block !important;
        }
        &[dropattrtype~="categorical"][dropattrtype~="singlevalue"] .dropZone_textSearch{
            display: block !important;
        }
    }
    &[ratiomode=true]{
        .chartAxis_Measure {
            > .tick > .text::after{
                content: "%";
            }
        }
    }
    &[previewcompare="true"]{
        .compare{
            opacity: 1 !important;
        }
        .compareLine{
            opacity: 1 !important;
        }
    }
    &[isfiltered=true] {
        .listHeader .filterClearAll{
            opacity: 1;
            pointer-events: all;
        }
    }

    .compareButton{
        display: block;
        position: absolute;
        font-size: 0.7em;
        color: gray;
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
        .transition(~'opacity 500ms ease-in-out');
        &:after{
            content: "\f13e";
        }
        &:hover:after{
            content: "\f023";
        }
        &[inside]{
            color: white;
            text-shadow: 0px 0px 1px rgb(0, 0, 0);
        }
    }
    span[showlock="true"]{
        .compareButton{
            pointer-events: all;
            opacity: 1;
        }
    }
    span[compare="true"]{
        .compareButton{
            pointer-events: all;
            opacity: 1;
            &:not([inside]){
                color: @color_preview_compare;
            }
            &:after{
                content: "\f023";
            }
            &:hover:after{
                content: "\f13e";
            }
        }
    }

    .unitName{
        opacity: 0.6;
        margin-left: 1px;
    }

    .sortButton{
        cursor: pointer;
        &:hover{
            color:orangered
        }
        &:before{
            content: "\f161";
        }
        &[inverse='true']:before{
            content: "\f160";
        }
    }

    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility; // People say this has big performance drawbacks
    display: block;

    // Used only in breadcrumb display
    .AndOrNot{
        color: white;
        display: inline-block;
        font-weight: 300;
        font-size: 0.8em;
        vertical-align: top;
        border-radius: 3px;
        padding: 0px 2px 0px 2px;
        margin-top: 1px;
        opacity: 0.7;
        &.AndOrNot_And{
            background-color: @color_query_and;
        }
        &.AndOrNot_Or{
            background-color: @color_query_or;
        }
        &.AndOrNot_Not{
            background-color: @color_query_not;
        }
    }
    .noselect {
        .user-select(none);
    }

    .attributeList{
        display: none;
        position: absolute;
        overflow: auto;

        left: -220px;
        width: 215px;
        top: 5px;
        height: 100%;

        > .attributeName{
            font-size: 0.8em;
            padding: 2px;
            margin: 2px;
            min-height: 36px;
            border-radius: 3px;
            background-color: rgb(232, 232, 232);
            border: solid 1px lightgray;
            cursor: pointer;
            .user-select(none);
            > .summaryTitle{
                display: inline;
            }
            > .editTitleButton{
                font-size: 0.8em;
                display: none;
                color:gray;
                vertical-align: middle;
                margin: 2px;
                vertical-align: top;
                &:hover{
                    color: orangered;
                }
            }
            > .summaryTitleEdit{
                width: calc(~"100% - 20px");
                display: none;
                border-width: 0px;
                background-color: rgba(250,250,250,0.9);
                color: orangered;
                &:focus{
                    outline-color: #cb5454;
                    outline-width: 0px;
                }
                &:hover{
                    border-width: 0px;
                    background-color: white;
                    margin: 0px;
                }
                &::-webkit-input-placeholder {
                    font-weight: 500;
                    color: #cb5454;
                }
            }
            > .summaryTypeIcon{
                float: right;
            }
            .nuggetInfo{
                display: inline-block;
                width: 100%;
                .flex(1);
                .align-self(center);
                font-weight: 500;
                font-size: 0.7em;
                vertical-align: top;
                text-align: center;
                > .num_left{
                    float:left;
                    margin-left:2px;
                }
                > .num_right{
                    float:right;
                    margin-right:2px;
                }
                > .fa{
                    color: gray;
                }
            }
            &[aggr_initialized=false]{
                > .attribNugget {
                    > .nuggetInfo{
                        font-size: 2em;
                        text-align: center;
                        position: relative;
                        &:before{
                            content: "\f110"; // spinner
                        }
                    }
                    > .nuggetViz{
                        display: none !important;
                    }
                    &:hover{
                        > .nuggetInfo{
                            -webkit-animation: fa-spin 2s infinite linear;
                            animation: fa-spin 2s infinite linear;
                        }
                    }
                }
            }
            > .attribNugget{
                .display(flex);
                height: 30px;
                background-color: rgba(255,255,255,0.8);
                width: 50px;
                float: right;
                width: 60px;
                border-radius: 5px;
                border: solid 1px rgba(255,255,255,0.8);
                &:hover{
                    border-color: gray;
                }
                > .nuggetViz{
                    .flex(1);
                    height: 30px;
                    margin-right: 3px;
                    margin-left: 3px;
                    > .nuggetBar{
                        .flex(1);
                        display: block;
                        background-color: @color_bars;
                    }
                }
            }
            &:hover{
                background-color: #E8E0CE;
                border-color: #B8B6B1;
                > .editTitleButton{
                    display: inline-block;
                }
            }
            &[edittitle="true"]{
                > .summaryTitle{
                    display: none;
                }
                > .summaryTitleEdit{
                    display: inline-block;
                }
                > .editTitleButton{
                    &::before{ content: "\f00c"; }
                }
            }
            &[state='edited']{
                > .editTitleButton{
                    display: inline-block;
                }
            }
            &[datatype~="interval"]{
                > .attribNugget{
                    .flex-direction(column);
                    > .nuggetViz{
                        .display(flex);
                        .flex-direction(row);
                        > .nuggetBar{
                            .align-self(flex-end);
                        }
                    }
                }
                .nuggetViz{ .order(1); }
                .nuggetInfo{ .order(2); max-height: 1em; }
            }
            &[datatype~='time']{
                .nuggetInfo{
                    &:before {
                        content: '\f017'; // fa-clock-o
                    }
                }
            }
            &[datatype~="categorical"]{
                > .attribNugget{
                    .flex-direction(row);
                    > .nuggetViz{
                        .display(flex);
                        .flex-direction(column);
                    }
                }
            }
            &[state='custom']{
                > .editTitleButton{
                    display: inline-block;
                    font-size: 0.9em;
                    color: black;
                    &:before{ content: "\f121"; } // Code
                }
            }
        }
        > .attributeListHeader{
            font-weight: 700;
        }
    }

    .panels_Above{
        .display(flex);
        .flex-direction(row);
    }

    .attribDragBox{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 22px;
        width: 200px;
        background-color: lightgray;
        border-radius: 10px;
        border: double 3px gray;
        display: none;
        z-index: 200;
        text-align: center;
        font-weight: 500;
        font-size: 0.8em;
        cursor: default;
        text-rendering: initial;
        pointer-events: none;
    }

    .panel {
        > .dropZone{
            .flex(1);
            display: none;
            background-color: rgb(240, 240, 240);
            border-radius: 10px;
            border-style: solid;
            border-color: gray;
            border-width: 2px;
            z-index: 50;
            margin: 2px;
            &:hover{ background-color: rgb(255, 188, 163); }
            &[readyToDrop="true"] {
                background-color: rgb(255, 188, 163);
                border-color: orangered;
            }
        }
        > .dropZone_panel{
            display: none;
            background-color: rgba(200, 200, 200, 0.3);
            border-color: gray;
            border-style: solid;
            border-width: 0px;
            // border-radius: 10px; // Set depending on the pane;
            z-index: 50;
            position: absolute;
            &:hover{ background-color: rgb(255, 188, 163); }
        }
        .dropIcon{
            margin: 0px auto;
            position: relative;
            display: block;
            font-size: 1.3em;
            pointer-events: none;
            text-align: center;
        }
        .dropZone[readyToDrop=true] .dropIcon{
            color: orangered;
        }
        &[hidebars=true] .kshf {
            .attrib .aggr_Group{ display:none; }
        }
        &[hidebaraxis=true] {
            .facetCategorical{
                .chartAxis_Measure{ display:none; }
                .barChartMainInfo{ display:none; }
            }
        }
        > .panelAdjustWidth{
            display: none;
            position: absolute;
            pointer-events: all;
            height: 100%;
            width: 0px;
            top: 0px;
            // border-bottom: solid 1px lightgray;
            // border-top: solid 1px lightgray;
            border-width: 0px 2px 0px 0px;
            border-style: dotted;
            border-color: lightgray;
            cursor: col-resize;
            // .background-image(~"linear-gradient(right, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 1) 40%, rgba(12, 12, 12, 1) 50%, rgba(230, 230, 230, 1) 60%, rgba(230, 230, 230, 0) 100%)");
            opacity: 0.5;
            z-index: 10;
            &:hover{
                // border-bottom: solid 1px gray;
                // border-top: solid 1px gray;
                border-width: 0px 2px 0px 0px;
                border-style: dotted;
                border-color: gray;
                // .background-image(~"linear-gradient(right, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 1) 40%, rgba(101, 101, 101, 1) 50%, rgba(150, 150, 150, 1) 60%, rgba(150, 150, 150, 0) 100%);");
            }
        }
        &.panel_bottom{
            .display(inline-flex);
            .flex-direction(column);
            width: 100%;
            > .dropZone_panel{
                bottom: -30px;
                height: 30px;
                width: 100%;
                border-radius: 0px 0px 40px 40px;
                border-bottom-width: 2px;
                border-top-width: 1px;
            }
        }
        &.panel_left{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            height: 100%;
            > .dropZone_panel{
                left: 0px;
                height: 100%;
                top: 0%;
                width: 30px;
                border-radius: 0px 40px 40px 0px;
                border-right-width: 2px;
                border-left-width: 1px;
            }
            > .panelAdjustWidth{
                right: -2px;
            }
        }
        &.panel_right{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            height: 100%;
            > .dropZone_panel{
                right: 0px;
                height: 100%;
                top: 0%;
                width: 30px;
                border-radius: 40px 0px 0px 40px;
                border-left-width: 2px;
                border-right-width: 1px;
            }
            > .panelAdjustWidth{
                left: -2px;
            }
        }
        &.panel_middle{
            .display(inline-flex);
            .flex-direction(column);
            vertical-align: top;
            position: relative;
            flex: 1;
            > .dropZone_panel{
                bottom: 0px;
                height: 30px;
                width: 100%;
                border-radius: 40px 40px 0px 0px;
                border-top-width: 2px;
                border-bottom-width: 1px;
            }
        }
        &.panel_resize{
            position: absolute;
            right: 0px;
            bottom: 0px;
            cursor: nwse-resize;
            width: 0;
            height: 0;
            z-index: 10;
            border-left: 16px solid transparent;
            border-right: 16px solid lightgray;
            border-top: 16px solid transparent;
            :hover{ border-right: 16px solid gray; }
        }
        &.panel_infobox {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 2000;
            transform: scale(1);
            text-align: center;
            .transition(~'transform 500ms ease-in-out, opacity 500ms');

            .keyframes(~'itemZoom, 0%{transform: scale(0); opacity:1;} 100% {transform: scale(1); opacity:1;}');

            .infobox_close_button{
                position: absolute;
                right: 3px;
                top: 3px;
                background-color: rgb(151, 151, 151);
                width: 20px;
                height: 20px;
                border-radius: 20px;
                text-align: center;
                cursor: pointer;
                line-height: 20px;
                color: white;
                &:hover{ background-color: rgb(111, 111, 111); }
            }
            // DONT MESS WITH THIS
            > .background{
                width: 100%;
                height: 100%;
                z-index: -2;
                background: #0b0b0b;
                opacity: 0.8;
                position: absolute;
                .transition(~'all 0.5s');
                border-radius: 20px;
            }
            > .infobox_content{
                display: none;
                margin: auto;
                box-shadow: 0px 0px 20px gray;
                border-radius:15px;
                background-color:white;
                opacity: 1.0;
                z-index: 1043;
                max-height: 90%;
                max-width: 90%;
                overflow-y: auto;
                overflow-x: hidden;
            }

            > .infobox_loading{
                width: 300px;
                height: 35px;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                .loadinggg{
                    position: absolute;
                    top: 8px;
                    left: 10px;
                    i.fa-warning{
                        margin-left: 20px;
                        font-size: 1.5em;
                    }
                }
                div.status_text{
                    margin: auto;
                    position: absolute;
                    top: 10px;
                    left: 70px;
                    height:20px;
                    > .status_text_sub{
                        margin-left:5px;
                    }
                }
            }
            > .infobox_credit{
                display:none;
                width: 390px;
                height: 260px;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                div.all-the-credits{
                    margin: auto;
                }
                div.header{
                    background-color:rgb(216, 221, 212);
                    width:100%;
                    padding-top: 5px;
                    border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    border-bottom: solid 2px rgb(60, 94, 67);
                }
                span.libName{
                    font-size: 1.4em;
                    font-weight: 700;
                }
                div.project_fund {
                    font-size: 0.8em;
                    font-weight: 300;
                }
            }
            > .infobox_itemZoom{
                position: relative;
                margin: 20px;
                padding: 10px;
            }
            &[show=loading] > .infobox_loading{
                display: inline-block;
            }
            &[show=credit] > .infobox_credit{
                display: inline-block;
            }
            &[show=none]{
                pointer-events: none;
                //display: none;
                > .background{ opacity: 0;}
            }
            &[show=itemZoom] {
                > .infobox_itemZoom{
                    .animation(itemZoom 500ms forwards);
                    .animation-iteration-count(1);
                    .animation-timing-function(ease-in-out);
                    display: inline-block;
                }
            }
        } // panel_infobox
    }

    .hasLabelWidth{ text-align: right; }
    .attribGroup{
        direction:ltr;
    }
    .attrib{
        // add background to the text area when an item is selected
        &:not([selected="0"]) {
            .attribLabel{
                .background-image(~"linear-gradient(left, rgba(220,220,220,0) 0%, rgba(220,220,220,1) 20px)");
            }
            .item_count_wrapper{
                .background-image(~"linear-gradient(left, rgba(220,220,220,1) 0%, rgba(220,220,220,0) 100%)");
            }
        }
    }
    .kshfChart[collapsed=true] {
        > .headerGroup > .header_display_control{
            > .fa-collapse{
                opacity: 1;
                &:hover{
                    //.animation-direction(reverse);
                }
                &::before{ content: "\f065"; }
            }
        }
    }
    .belowAttribs{ direction: ltr; }

    .subFacets{
        .kshfChart{ margin-left: 17px; }
    }
    .facetCategorical{
        .scrollToTop{
            right: 3px;
        }
    }
    //}

    .chartFilterButtonParent{
        //position: absolute;
        //left: -18px;
    }
    .chartClearFilterButton{
        width: 14px;
        height: 100%;

        display: inline-block;
        cursor: pointer;

        font-weight: 700;
        font-size: 11px;

        text-align: center;

        .transition(~"background-color 100ms linear,color 100ms linear, opacity 400ms");

        background-color: #635d46;
        color: #eeebe0;
        border: solid 1px #635d46;
        &:hover{
            background-color: #B6AF96;
            color: #635d46;
        }

        &.alone{
            display: none;
            vertical-align: top;
            pointer-events: all;
            box-shadow: 1px 1px 1px #474940;
        }
        &.summary{
            display: inline-block;
            position: absolute;
            right: 0px;
            margin-left: 2px;
            line-height: 0.9em;
        }
        &.allFilter{
            display: inline-block;
            float: right;
            margin-left: 2px;
            height: 16px;
        }
    }

    .selection_bar rect{
        fill: #788890;
        fill-opacity: 0;
        cursor: col-resize;
        stroke-width:1.5;
        pointer-events: none;
        &:hover { stroke: orangered; }
    }

    .chartAxis_Measure {
        pointer-events: none;
        position:absolute;
        z-index: 2;
        top: 0px;
        .transition(@layout_animation);
        > .tick{
            opacity: 0;
            position:absolute;
            > .text{
                display: block;
                position: relative;
                text-align: center;
                font-size: 0.6em;
                font-weight: 300;
                line-height: 9px;
                cursor: default;
                color: gray;
            }
            > .line{
                display: block;
                position: absolute;
            }
        }
        > .percentSign{
            pointer-events: all;
            position: absolute;
            color: gray;
            font-size: 0.7em;
            font-weight: 700;
            cursor: pointer;
            &:after{
                content: '#';
            }
            &:hover{
                color: orangered;
            }
        }
        > .background{
            position: absolute;
            left: 0px;
            top: 0px;
            cursor: pointer;
            pointer-events: all;
            background-color: rgb(194, 146, 124);
            opacity: 0;
            &:hover{
                opacity: 0.1;
            }
        }
    }

    .border_line{
        position: relative;
        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0) 0%, rgba(190, 190, 190, 1) 10%, rgba(190, 190, 190, 1) 90%, rgba(190, 190, 190, 0) 100%);");
        height: 1px;
        margin-bottom: -2px;
        pointer-events: all;
        top: -1px;
        &.border_line_bottom{
            //position: absolute;
            width: 100%;
            height: 1px;
            margin-bottom: 0px;
            //top: calc(100% - 1px);
        }
    }

    .headerGroup{
        position: relative;
        text-align: center;
        padding-top: 1px;
//        background-color: #E7E6E6;
        border-radius: 3px;
//        border: solid 1px gray;
//        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0) 0%, rgba(190, 190, 190, 0.3) 10%, rgba(190, 190, 190, 0.3) 90%, rgba(190, 190, 190, 0) 100%);");
        .background-image(~"linear-gradient(right, rgba(190, 190, 190, 0.2) 0%, rgba(190, 190, 190, 0.4) 20%, rgba(190, 190, 190, 0.4) 80%, rgba(190, 190, 190, 0.2) 100%);");
        .summaryTitle {
            display: block;
            font-weight: 700;
            cursor: default;
            font-variant: small-caps;
            padding-top: 1px;
            padding-bottom: 1px;
            line-height: 1em;
            text-rendering: initial;
            white-space: nowrap;
            text-align: center;
            margin: 0 auto;
            min-height: 18px;
            /*white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;*/
            > .summaryTitle_text{
                display: inline-block;
                max-width: 70%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: -4px;
            }
            > .summaryTitle_edit{
                display: none;
                //width: calc(~"100% - 50px");
                border-width: 0px;
                background-color: rgba(250,250,250,0.9);
                color: orangered;
                text-align: center;
                &:focus{
                    outline-color: #cb5454;
                    outline-width: 0px;
                }
                &:hover{
                    border-width: 0px;
                    background-color: white;
                    margin: 0px;
                }
                &::-webkit-input-placeholder {
                    font-weight: 500;
                    color: #cb5454;
                }
            }
            > .summaryTitle_editButton{
                display: inline-block;
                position: relative;
                font-size: 0.7em;
                color: gray;
                cursor: pointer;
                vertical-align: top;
                margin-left: 3px;
                margin-top: 2px;
                opacity: 0;
                pointer-events: none;
                &:before{
                    content: '\f040';
                }
                &:hover{
                    color: black;
                }
            }
            &[edittitle="true"]{
                > .summaryTitle_text{
                    display: none;
                }
                > .summaryTitle_edit{
                    display: inline-block;
                }
                > .summaryTitle_editButton{
                    opacity: 1;
                    pointer-events: all;
                    &:before{
                        content: "\f00c";
                    }
                }
            }
        }
        .save_filter_as_set{
            display: none;
            position: absolute;
            cursor: pointer;
            margin-left: 4px;
            margin-top: 1px;
            width: 15px;
            color: gray;
            &:hover{
                color: black;
            }
        }
        .chartClearFilterButton.rowFilter{
            pointer-events: all;
            height: 14px;
            width: 14px;
            line-height: 13px;
            margin-right: 3px;
        }
        span.facetIcons{
            font-size: 0.8em;
            color: gray;
            position: absolute;
            right: 3px;
            top: 1px;
            .fa{
                cursor: pointer;
                margin-left: 2px;
                &:hover{ color:black; }
            }
            .hasMultiMappings{
                display: none;
            }
            span.isLinkedMark{
            }
            .facetDescription{
                cursor: default;
            }
        }
        > .header_display_control{
            display: block;
            position: absolute;
            top: 0px;
            z-index: 10;
            .transition(~'color 250ms linear, opacity 100ms linear ');
            .transform-origin(50% 50%);
            > .fa{
                display: inline-block;
                opacity: 0;
                color: black;
                cursor: pointer;
                margin-right: 2px;
                font-size: 0.8em;
                width: 14px;
                height: 14px;
                width: 13px;
                height: 13px;
                &:hover{ color:#cb5454; }
            }
/*            > .fa-collapse:hover{
                .animation(shrink 800ms);
                .animation-iteration-count(infinite);
                .animation-timing-function(ease-in);
            }*/
            > .fa-collapse{
                &::before{ content: "\f066"; }
            }
            > .fa-remove{
                display: none;
            }
            > .expandButton{
                display: none;
            }
        }
        span.showFilterText{
            display: inline-block;
            float: left;
            pointer-events: all;
        }
    } // headerGroup

    .aggr{
        display: block;
        position: absolute;
        background-color: @color_bars;
        .transform-origin(0% 0%);
        &.active{
            cursor: pointer;
            pointer-events: all;
        }
        &.total{
            background-color: @color_bars_background;
            pointer-events: none;
        }
        &.preview{
            background-color: @color_related;
            pointer-events: none;
            .transform(~'scaleX(0)');
            &[fast]{
                .transition(~'transform 200ms ease-in-out');
            }
        }
        &.compare{
            background-color: @color_preview_compare;
            pointer-events: none;
            .transition(~'opacity 400ms ease-in-out, transform 200ms ease-in-out');
            opacity: 0;
        }
    }

    .kshfChart{
        display: block;
        border-radius: 6px;
        position: relative;
        // overflow: hidden; // Keep it this way! -- Why?

        > .wrapper{
            position: relative;
            overflow: hidden;
            // so that absolute positioned elements will not overflow
        }

        > .wrapper{
            > .facetCategorical{
                overflow: hidden;
                > .facetControls{
                    border-bottom: dotted 1px lightgray;
                    margin-bottom: -1px;
                    position: relative;
                    display: none;
                    > .attribTextSearch{
                        display: none;
                        vertical-align: top;
                        white-space:nowrap;
                        position: relative;
                        cursor: text;
                        > .attribTextSearchInput {
                            display: block;
                            width: 100%;
                            height: 15px;
                            font-size: 0.7em;
                            font-weight: 700;
                            border-width: 0px;
                            // border-bottom: dashed 1px #cb5454;
                            color: #cb5454;
                            background-color:rgba(244, 244, 244,0);
                            pointer-events: all;
                            margin: 0px;
                            cursor:text;
                            text-align: right;

                            &:focus{
                                outline-color: gray;
                                outline-width: 4px;
                            }
                            &:hover{
                                border: solid 1px #cb5454;
                                padding: 0px 0px 0px 0px;
                                //background-color: white;
                            }
                            &::-webkit-input-placeholder {
                                font-weight: 500;
                                color: #cb5454;
                                text-align:right;
                            }
                            &:focus::-webkit-input-placeholder {
                                color: #F3CDCD;
                            }
                            &:hover::-webkit-input-placeholder {
                                color: #F3CDCD;
                            }
                        }
                        > .attribTextSearchControl{
                            position: absolute;
                            top: 2px;
                            left: 1px;
                            padding-left: 1px;
                            font-size: 0.7em;
                            pointer-events: none;
                            color: #cb5454;
                            // Search icon
                            &:before{
                                content: "\f002";
                            }
                            &[showClear=true]{
                                cursor: pointer;
                                pointer-events: all;
                                color: gray;
                                &:hover{
                                    color: #cb5454;
                                }
                                &:before{
                                    content: "\f057";
                                }
                            }
                        }
                    } // attribTextSearch

                    .sortButton{
                        position: absolute;
                        bottom: 1px;
                        font-size: 0.7em;
                        text-align: right;
                        &:hover{
                            color:orangered
                        }
                        &:before{
                            content: "\f161";
                        }
                        &[inverse='true']:before{
                            content: "\f160";
                        }
                    }

                    > .sortOptionSelectGroup{
                        display: block;
                        vertical-align: top;
                        white-space:nowrap;
                        position: relative;
                        font-weight: 300;
                        > .optionSelect{
                            width: 100%;
                            heigh: 16px;
                            font-size: 0.7em;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            background: transparent;
                            appearance: none;
                            font-weight: 300;
                            border-width: 0px;
                            cursor: pointer;
                            padding-right: 0px;
                            margin: 0px;
                            vertical-align: middle;
//                            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='15px'><polyline points='0,2 10,2, 5,11'/></svg>") no-repeat top right;
                            &:hover{
                                color: orangered;
                            }
                        }
                    }
                } // facetControls

                .scrollToTop{
                    margin-top: -13px;
                    font-size: 0.8em;
                    pointer-events: all;
                    position: absolute;
                }
                .selectAllAttribsButton{
                    font-size: 0.6em;
                    float: left;
                    margin-left: 2px;
                    font-weight: 300;
                    color: black;
                    border: solid 1px lightgray;
                    border-radius: 10px;
                    padding: 1px 5px 0px 5px;
                    background-color: rgba(150,150,100,0.2);
                    cursor: pointer;
                    &:hover{
    //                    font-weight: 500;
                        box-shadow: 0px 0px 1px black;
                    }
                    &::before{
                        content: '+ Add Filter with All';
                    }
                }
                .scroll_display_more{
                    font-size: 0.7em;
                    line-height: 1.4em;
                    vertical-align: top;
                    font-style:italic;
                    cursor: pointer;
                    color: rgb(145, 145, 145);
                    opacity:1;
                    pointer-events: all;
                    display: inline-block;
                    padding-top: 2px;
                    &:hover{ color: #cb5454; }
                }

                > .attribGroup{
                    position:relative;
                    overflow-y: auto;
                    overflow-x: hidden;
                    display: block;
                    pointer-events: all;
                    z-index: 5;
                    .transition(~'height 700ms ease-in-out');

                    > .chartBackground{
                        opacity: 0;
                        width: 1px;
                        display: block;
                        .transition(~'opacity 250ms');
                    }

                    > .attrib{
                        display: block;
                        position: absolute;
                        white-space: nowrap;
                        top: 0px;
                        height: 16px;
                        > .clickArea{
                            position: absolute;
                            left: 0px;
                            z-index: 20;
                            display: inline-block;
                            vertical-align: top;
                            pointer-events: all;
                            // Note: The height of clickable area is the same as height of the bar!
                            margin-top:4px;
                            margin-bottom:4px;
                            height: 10px !important; // total: 18px
                            position: absolute;
                            font-size: 0.8em;
                            font-weight: 300;
                            width: 1px;
                            left: 0px;
                        }
                        .compareButton{
                            width: 9px;
                            text-align: right;
                            top: 4px;
                            z-index: 300;
                            &[inside]{
                                margin-left: -11px;
                            }
                        }
                        > .attribLabel{
                            position: absolute;
                            display: inline-block;
                            vertical-align: top;
                            line-height: 18px;
                            pointer-events: none;
                            z-index: 21;

                            font-size: 0.8em;
                            font-weight: 300;
                            cursor: default;
                            // display ... when text is too long
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            > .theLabel{
                                // And/Or/Not can come before...
                                &:before{
                                    color: white;
                                    font-weight: 300;
                                    font-size: 0.7em;
                                    vertical-align: top;
                                    border-radius: 3px;
                                    padding: 1px 2px 0px 2px;
                                    margin: 0px 2px;
                                    opacity: 0.4;
                                }
                                .AndOrNot{
                                    display: inline;
                                }
                            }
                        }
                        > .item_count_wrapper{
                            position: absolute;
                            display: inline-block;
                            vertical-align: top;
                            line-height: 18px;
                            pointer-events: none;

                            font-size: 0.7em;
                            pointer-events: none;

                            padding-right: 1px;
                            text-align: right;
                        }
                        > .aggr_Group{
                            display: inline-block;
                            vertical-align: top;
                            pointer-events: none;
                            position: relative;
                            pointer-events: none;
                            .aggr{
                                .transform-origin(0%, 0%);
                                top: 4px;
                                width: 1px;
                                height: 10px;
                                &.total_tip{
                                    right: -5px;
                                    /* right arrow */
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 5px solid @color_bars_background;
                                    background-color: initial;
                                    /*
                                    // The sawtooth pattern
                                    width: 8px;
                                    left: 0px;
                                    height: 10px;
                                    top: 4px;
                                    opacity: 0px;

                                    background: linear-gradient(-135deg, transparent 75%, @color_bars_background 75%) 0 50%,
                                    linear-gradient(-45deg, transparent 75%, @color_bars_background 75%) 0 50%;

                                    background-position: top left, top left;
                                    background-repeat: repeat;
                                    background-size: 8px 8px;
                                    */
                                }
                                &.compare{
                                    width: 1px;
                                    height: 5px;
                                }
                            }
                        }
                        .filterButtons{
                            white-space: nowrap;
                            cursor: pointer;
                            vertical-align: top;
                            //float: left;
                            z-index: 100;
//                            margin-bottom: -2px;
//                            font-size: 1.1em;
                            pointer-events: all;
                            > .filterButton{
                                display: none;
                                pointer-events: all;
                                margin-right: 2px;
                                border-radius: 4px;
                                vertical-align: middle;
                                padding: 1px 2px 0px 3px;
                                line-height: 13px;
                                color: white;
                                font-weight: 300;
                                font-size: 0.7em;
                            }
                            > .orButton {
                                background-color: lighten(@color_query_or, 10%);
                                &:hover { background-color: @color_query_or; }
                                &:before{ content: "Or"; }
                            }
                            > .notButton {
                                background-color: rgb(166, 166, 166);
                                &:before{ content: "Not"; }
                                &:hover { background-color: gray; }
                            }
                        }

                        &[activeItems='0'] {
                            .measureLabel{
                                visibility: hidden;
                            }
                        }

                        &[compare="true"] {
                            > .attribLabel > .theLabel{
                                font-weight: 700;
                            }
                        }
                        &:not([selected="0"]) {
                            > .attribLabel > .theLabel{
                                font-weight: 700;
                            }
                            .clickArea{ cursor: pointer; }
                        }
                        // AND
                        &[selected="1"]{
                            > .attribLabel > .theLabel{ color: @color_query_and; }
/*                            &[show-box=true]{
                                > .attribLabel > .theLabel:before{
                                    content: "And";
                                    background-color: @color_query_and;
                                }
                            }*/
                        }
                        // OR
                        &[selected="2"]{
                            > .attribLabel > .theLabel{ color: @color_query_or; }
                            &[show-box=true]{
                                > .attribLabel > .filterButtons > .orButton {
                                    display: inline;
                                }
                            }
                        }
                        // NOT
                        &[selected="-1"]{
                            /*
                            > .attribLabel > .theLabel{
                                color: @color_query_not;
                                &:before{
                                    content: "Not";
                                    background-color: @color_query_not;
                                }
                            }
                            */
                            > .attribLabel > .theLabel{
                                color: @color_query_not;
                            }
                            > .attribLabel > .filterButtons > .notButton{
                                display: inline;
                                background-color: @color_query_not;
                            }
                        }

                        &[noitems=false]{
                            &[highlight^="selected"] {
                                > .attribLabel > .theLabel{
                                    font-weight: 700 !important;
                                }
                                // Not selected
                                &[selected="0"] {
                                    .clickArea { cursor: pointer; }
                                    &[selecttype="and"] > .attribLabel > .theLabel{
                                        color: @color_query_and;
                                    }
                                    &[selecttype="or"] > .attribLabel > .theLabel{
                                        color: @color_query_or;
                                    }
                                    &[selecttype="not"] > .attribLabel > .theLabel{
                                        color: @color_query_not;
                                    }
                                }
                            }
                            &[highlight=true] {
                                > .attribLabel > .theLabel{
                                    color: @color_related;
                                    font-weight: 700;
                                }
                            }
                        }
                        &[noitems=true] {
                            color:gray;
                            .measureLabel{ display: none; }
                        }
                    } // .attrib
                } // .attribGroup
            }// facetCategorical

            > .facetInterval {
                padding: 7px 11px 0px 6px;
                overflow: hidden;
                &[istime="true"]{
                    span.aggr{
                        opacity: 0 !important;
                    }
                }
                > .histogram{
                    position:relative;
                    pointer-events: all;
//                    overflow-x: hidden;
//                    overflow-y: visible;
                    .transition(~'height 700ms ease-in-out');
                    > .timeSVG{
                        .lineTrend.total{
                            fill: #EEF0F2;
                            stroke: none;
                            stroke-width: 1.5px;
                        }
                        .lineTrend.active{
                            fill: lighten(@color_bars, 10%);
                            stroke: @color_bars;
                            stroke-width: 1.5px;
                        }
                        .activeLine{
                            stroke: @color_bars;
                            stroke-width: 2px;
                        }
                        .lineTrend.preview{
                            fill: fadeout(@color_bar_preview,70%);
                            stroke: @color_bar_preview;
                            stroke-width: 2px;
                            opacity: 0;
                            .transition(~'opacity 500ms linear');
                        }
                        .previewLine{
                            stroke: @color_bar_preview;
                            stroke-width: 2px;
                            opacity: 0;
                        }
                        .lineTrend.compare{
                            fill: none;
                            stroke: @color_preview_compare;
                            stroke-width: 1.5px;
                            opacity: 0;
                            .transition(~'opacity 500ms linear');
                        }
                        .compareLine{
                            stroke: @color_preview_compare;
                            stroke-width: 2px;
                            opacity: 0;
                        }
                    }
                    > .bins{
                        position: absolute;
                        top: 0px;
                        // If this is set, it prevents background events from the other div layer
//                        width: 100%;
//                        height: 100%;
                        z-index: 3;
                        height: 100%;
                        .transition(@layout_animation);
                        > .aggr_Group{
                            position: absolute;
                            display: block;
                            height: 100%;
                            pointer-events: none;
                            > .aggr{
                                width: 1px;
                                height: 1px;
                                .transform-origin(0% 100%);
                                &.total_tip{
                                    content: " ";
                                    display: block;
                                    position: absolute;
                                    top: -7px;
                                    width: 100%;
                                    left: 0px;
                                    height: 8px;
                                    opacity: 0;

                                    background: linear-gradient(-135deg, transparent 75%, @color_bars_background 75%) 0 50%,
                                    linear-gradient(135deg, transparent 75%, @color_bars_background 75%) 0 50%;

                                    background-position: top left, top left;
                                    background-repeat: repeat;
                                    background-size: 8px 8px;
                                }
                            }
                            > .compareButton{
                                position: absolute;
                                width: 100%;
                                text-align: center;
                                &[inside]{
                                    margin-top: 12px;
                                }
                            }
                            > .measureLabel{
                                // top: 1px;
                                display: block;
                                position: relative;
                                width:100%;
                                font-size: 0.7em;
                                text-align: center;
                                cursor: pointer;
                                pointer-events: all;
                                .transition(~'transform 700ms ease-in-out');
                            }
                            &[noitems=true] {
                                > .measureLabel{ display: none; }
                            }
                        }
                    }
                    > .chartAxis_Measure {
                        top: 0px;
                        width: 100%;
                        height: 100%;
                        > .percentSign{
                            bottom: 0px;
                            left: 0px;
                            width: 20px;
                            text-align: right;
                        }
                        > .background{
                            width: 20px;
                            height: calc(~"100% - 12px");
                            top: -6px;
                        }
                        > .tick{
                            width: 100%;
                            > .line{
                                border-bottom: dotted 1px @color_axis_line;
                                width: 100%;
                                left: 0px;
                            }
                            > .text{
                                width: 25px;
                                left: -25px;
                                text-align: right;
                                top: -3px;
                                position: relative;
                            }
                        }
                    }

                }
                > .percentileGroup{
                    height: 12px;
                    margin-top: 1px;
                    position: relative;
                    border-style: solid;
                    border-color: lightgray;
                    border-width: 1px 0px;
                    > .percentileTitle{
                        font-size: 0.6em;
                        position: absolute;
                        display: inline-block;
                        font-weight: 300;
                        top: 0px;
                        left: -9px;
                        text-shadow: 0px 0px 2px white;
                        z-index: 120;
                        color: gray;
                        pointer-events: none;
                        display: none;
                    }
                    &:hover > .percentileTitle{
                        display: block;
                    }
                    > .quantile {
                        display: inline-block;
                        position: absolute;
                        height: 10px;
                        width:1px;
                        .transition(~'transform 700ms ease-in-out');
                        .transform-origin(0% 0%);
                        &.q_pos{
                            background-color: rgb(27, 111, 97);
                            margin-left: -0.5px;
                            z-index: 101;
                            pointer-events: none;
                            &.q_50 {
                                width: 4px;
                                background-color: rgb(27, 111, 97);
                                margin-left: -2px;
                                pointer-events: all;
                            }
                        }
                        &.q_range{
                            &:hover{
                                border-color: rgb(27, 111, 97);
                                border-style: solid;
                                border-width: 1px 0px 1px 0px;
                                z-index: 100;
                            }
                        }
                        &.q_40_60 {
                            background-color: lighten(rgb(27, 111, 97), 15%);
                        }
                        &.q_30_70 {
                            background-color: lighten(rgb(27, 111, 97), 40%);
                        }
                        &.q_20_80 {
                            background-color: lighten(rgb(27, 111, 97), 60%);
                        }
                        &.q_10_90 {
                            background-color: lighten(rgb(27, 111, 97), 70%);
                        }
                    }
                } // percentileGroup
                > .intervalSlider{
                    position:relative;
                    pointer-events: all;
                    > .controlLine {
                        height: 11px;
                        > .selectedItemValue{
                            position:absolute;
                            z-index: 20;
                            top: 1px;
                            display: none;
                            .transition(~'all 450ms ease-in-out');
                            > .circlee{
                                display: block;
                                border-radius: 20px;
                                width: 8px;
                                height: 8px;
                                background-color: orangered;
                                left: -4px;
                                position: relative;
                            }
                            > .selected-item-value-text{
                                position: relative;
                                top: 0px;
                                color: orangered;
                                font-size: 0.8em;
                                white-space: nowrap;
                                > .selected-item-value-text-v{
                                    position: relative;
                                    left: -50%;
                                    top: -2px;
                                    background-color: white;
                                    border-radius: 4px;
                                    border: solid 1px #DDDDDD;
                                    padding: 0px 1px;
                                    font-size: 0.9em;
                                }
                            }
                        }
                        > .base{
                            display: block;
                            position: absolute;
                            box-shadow: inset 0px 0px 2px gray;
                            .transform-origin(0% 0%);
                            &.total{
                                width: 100%;
                                height: 3px;
                                top: 3px;
                                cursor: ew-resize;
                                background-color: lightgray;
                            }
                            &.active{
                                height: 8px;
                                top: 1px;
                                width:1px;
                                display:none;
                                &[filtered=true]{
                                    display: block;
                                    cursor: col-resize;
                                    background-color: @color_filtered;
                                }
                                &:hover{
                                    background-color: orangered !important;
                                }
                            }
                        }
                        > .handle{
                            display:block;
                            position:absolute;
                            width:6px;
                            height:8px;
                            background-color: white;
                            border-width: 1px;
                            border-color: black;
                            border-style: solid;
                            cursor: ew-resize;
                            z-index: 10;
                            top:1px;
                            &:hover{
                                background-color: orangered !important;
                            }
                            &.min{
                                left: -5px;
                                border-top-left-radius: 10px;
                                border-bottom-left-radius: 10px;
                            }
                            &.max{
                                border-top-right-radius: 10px;
                                border-bottom-right-radius: 10px;
                            }
                            > .invalidArea{
                                position: relative;
                                display: block;
                                background-color: lightgray;
                                opacity: 0.3;
                            }
                            &.min > .invalidArea{
                                border-right: double 3px black;
                            }
                            &.max > .invalidArea{
                                border-left: double 3px black;
                            }
                        }
                        &[filtered=false]{
                            span.invalidArea{
                                display: none;
                            }
                        }
                        &[anim=true]{
                            > .base {
                                .transition(@bar_animation);
                            }
                            > .handle{
                                .transition(@bar_animation);
                            }
                        }
                    }
                    > .labelGroup{
                        cursor: default;
                        position:relative;
                        > .tick{
                            position:absolute;
                            > .text{
                                top: -1px;
                                font-size: 0.7em;
                                font-weight: 300;
                                position: relative;
                                left: -50%;
                                display: block;
                                text-align: center;
                                white-space: nowrap;
                            }
                            > .line{
                                position: absolute;
                                top: -10px;
                                height: 10px;
                                border-left: solid 1px rgb(160, 160, 160);
                                display: block;
                            }
                        }
                    } // labelGroup
                    /*
                    &[scaletype="log"] > .labelGroup > .tick > .line{
                        top: -22px;
                        height: 22px;
                    }
                    &[scaletype="linear"] > .labelGroup > .tick > .line{
                        top: -22px;
                        height: 22px;
                    }
                    */
                } // intervalSlider

            } // facetInterval
        } //

        .subFacets {
            position:relative;
            height: 100%;
        } // subFacets

        .facetGroupBar{
            display: inline-block;
            position: absolute;
            height: 100%;
            width: 17px;
            border-right: solid 2px rgb(204,195,195);
            //background-color: @color_facet_group;
            .background-image(~"linear-gradient(left, rgba(204,195,195,0) 0%, rgba(204,195,195,0.5) 100%)");
            > .facetGroupBarSub{
                height: 100%;
                width: 1px;
                margin: auto;
                background-color: black;
            }
        }

        &[collapsed=true]{
            > .headerGroup{
                // color: gray;
                .summaryTitle{
                    cursor: pointer;
                }
            }
            > .wrapper .facetCategorical{
                > .facetControls { display: none; }
                > .scrollToTop { display: none; }
                > .attribGroup { display: none; }
                > .belowAttribs { display: none; }
            }
            > .wrapper .facetInterval{
                > .histogram { display: none; }
                > .intervalSlider { display: none; }
            }
        }

        &[filtered=true] > .headerGroup {
            .chartClearFilterButton{
                display: inline-block;
            }
        }
        &:not([filtered_total="0"]):not([filtered_total="1"])[hasmultivalueitem=true]{
            > .headerGroup {
                .save_filter_as_set{
                    // display: inline-block;
                }
            }
        }
        &[hasmultivalueitem=false]{
            &[filtered_or="0"][filtered_and="0"]{
                > .wrapper > .facetCategorical > .attribGroup > .attrib:hover {
                    &[selected="0"] .notButton{
                        display: inline;
                    }
                }
            }
            &[filtered_or="0"]{
                > .wrapper > .facetCategorical > .attribGroup > .attrib:hover {
                    &[selected="-1"] {
                        cursor: pointer;
                    }
                }
            }
        }
        &:not([filtered_or="0"]){
            > .wrapper > .facetCategorical > .attribGroup > .attrib[selected="0"]:hover .orButton{
                display: inline;
            }
        }
        &:not([filtered_and="0"]){
            > .wrapper > .facetCategorical > .attribGroup > .attrib[selected="0"]:hover .orButton{
                display: inline;
            }
        }
        &[hasmultivalueitem=true]{
            > .wrapper > .facetCategorical > .attribGroup > .attrib {
                &[selected="0"] &[highlight="selected"] .notButton{
                    display: inline;
                }
            }
            > .headerGroup .hasMultiMappings{
                display: inline-block;
            }
        }
        &[filtered_range=true] .chartClearFilterButton.rangeFilter{
            display:inline-block;
        }

        &[refreshSorting="true"]{
            .sortButton:before{
                content: "\f175" !important;
            }
        }

/*        &:before{
            content:''; width:100%; height:100%;
            position:absolute; top:0; left:0;
            pointer-events:none;
        }*/

        &:hover{
//            margin: -1px;
//            border: solid 1px gray;
            > .headerGroup > .header_display_control > .fa{
                opacity: 1;
            }
            &[hasmultivalueitem=true] {
                > .headerGroup .hasMultiMappings{
                    display: inline-block;
                }
            }
        }

        &[hasFacets=true]{
            //border-top: double 3px #87868B;
            //margin-bottom: 2px;
//            padding-top: 3px;
            > .headerGroup {
                .background-image(~"linear-gradient(right, rgba(151, 151, 151, 0.2) 0%, rgba(151, 151, 151, 0.4) 20%, rgba(151, 151, 151, 0.4) 80%, rgba(151, 151, 151, 0.2) 100%);");
                .summaryTitle{
                    font-size: 1.3em;
                }
            }
        }
    }// kshfChart

    .belowAttribs{
        position:relative;
        height: 18px;
        .border_line{
            opacity: 0.6;
        }
        > .chartAxis_Measure {
            > .percentSign{
                right: 2px;
            }
            > .background{
                height: 15px;
            }
            > .tick{
                > .text{
                    width: 20px;
                    left: -10px;
                    top: 2px;
                    .transition(~'top 700ms ease-in-out');
                }
                > .line{
                    width: 0px;
                    border-left: dotted 1px @color_axis_line;
                    .transition(~'top 700ms ease-in-out, height 700ms ease-in-out');
                }
            }
        }
    }

    .measureLabel{
        color: @color_item_count;
    }
    &[resultpreview="true"] .measureLabel{
        color: orangered;
    }

    &[resultpreview="true"]{
        .lineTrend.preview{
            opacity: 1 !important;
        }
        .previewLine{
            opacity: 1 !important;
        }
    }

    .selectVertLine {
        display: inline-block;
        background-color: #EEDDDE;
        width:2px;
        display:none;
        position:absolute;
    }

    .loading_dots {
        width: 10px;
        height: 10px;
        background: gray;
        border-radius: 50px;
        margin: 4px;
        display: inline-block;
        &[anim]{
            //background: black;
            .animation(fade 900ms forwards);
            .animation-iteration-count(infinite);
            &.loading_dots_1 {
            }
            &.loading_dots_2 {
                .animation-delay(300ms)
            }
            &.loading_dots_3 {
                .animation-delay(600ms)
            }
        }
    }

    .middleColumn{
        .display(inline-flex);
        .flex-direction(column);
        .flex(1);
    }

    .listDiv{
        // position: absolute; // exact position is calculated by keshif
        // box-shadow: 2px 2px 2px rgb(150, 134, 73);
        position: relative;
        top: 0px;
        overflow: hidden; // Don't remove!
        display: inline-block;
        .transition(~'margin-top 700ms ease-in-out');
        > .listItemGroup{
            width: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            border-style: solid;
            border-color: rgb(223, 210, 169);
            border-width: 0px 2px 2px 2px;

            background-color: white;
            // height is set dynamically by JavaScript
            .transition(~'height 700ms ease-in-out');

            > .listItem{
                opacity: 1;
                cursor: default;
                overflow: hidden;
                vertical-align: top;
                padding: 1px 0px;
                position: relative;
                .transition(~"opacity 500ms ease");

                > .itemRank{
                    display: none;
                    font-size: 0.6em;
                    color: gray;
                    font-weight: 300;
                    font-style: italic;
                    text-align: right;
                }

                > .content{
                    vertical-align: top;
                    border: solid 0px lightgray;
                    position: relative;

                    > .iteminfo{
                        float:none;
                        clear: left;
                        font-weight:normal;
                        margin-bottom: 2px;
                    }
                    > .iteminfo_0{
                        font-size:1.0em;
                        color: black;
                    }
                    > .iteminfo_1{
                        font-size:0.9em;
                        color: #555555;
                    }
                    > .iteminfo_2{
                        font-size:0.8em;
                        color: #555555;
                        font-style:italic;
                        font-weight:300;
                    }
                    > .iteminfo_3{
                        font-size:0.8em;
                        color: rgb(167, 31, 31);
                        font-style:italic;
                        font-weight:300;
                    }
                }
                > .itemToggleDetails{
                    display: none;
                    vertical-align: top;
                    width:18px; // includes the padding, using box model...
                    cursor: pointer;
                    font-weight: 700;
                    > .item_details_toggle{
                        .transition(~'transform 500ms');
                        color: gray;
                        position: relative;
                        &:hover{ color:black; }
                    }
                }
                > .itemLinkStateColumn{
                    vertical-align: top;
                    display: table-cell;
    //                float: right;
                    text-align: right;
                    vertical-align: top;
                    white-space: nowrap;
                    padding-right: 2px;
                    > .itemLinkIcon{
                        font-size: 0.9em;
                        display: none;
                        cursor: pointer;
                        margin-right: 2px;
                    }
                    > .measureLabel{
                        font-size: 0.6em;
                        vertical-align: middle;
                    }
                    > .itemSelectCheckbox{
                        cursor: pointer;
                        width: 14px;
                        text-align: left;
                        display: inline-block;
                        font-size: 0.8em;
                        padding-left: 2px;
                        font: normal normal normal 14px/1 FontAwesome;
                        text-rendering: auto;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        color: gray;
                        &:hover {color: orangered;}
                    }
                }

                &[animst=open]{
                    opacity: 0;
                }
                &[animst=closed]{
                    max-height: 0px !important;
                    padding: 0px !important;
                    opacity: 0;
                }
                &[animst=visible]{
                    display: block;
                }

                &[details=true]{
                    max-height: none;
                    .item_details_toggle{
                        display:inline-block;
                        .rotate(180deg);
                    }
                    .item_details{
                        display:block;
                    }
                }
                &[details=false]{
                    .item_details_toggle{
                        display:block;
                    }
                    .item_details{
                        display:none;
                    }
                }

                &[highlight^="selected"]{
                    box-shadow: inset 0px 0px 2px black; //@color_bars_selected;
                    &[selectedForLink=true]{
                        .background-image(~"linear-gradient(right, rgba(255,193,157,1), rgba(255,193,157,0) 30px, rgba(255,193,157,0) 100%)");
                        > .itemLinkStateColumn > .itemLinkIcon{
                            display: inline;
                            color: @color_bars_selected;
                            &:hover{
                                color: orangered;
                            }
                        }
                    }
                }
                &[highlight=true]{
                    box-shadow: inset 0px 0px 5px #BBBBBB;
                    background-color: #F8F8F8;
                    > .itemLinkStateColumn > .itemLinkIcon{
                        display: inline;
                        color: gray;
                    }
        //            .background-image(~"linear-gradient(left, #ff6a33 0%, #F2F2F2 50px, #F2F2F2 100%)");
        //            box-shadow: inset 0px 0px 4px @color_related;
                }
                &[selectedForLink=true] .itemLinkStateColumn > .itemSelectCheckbox:before{
                    content: "\f046"; // checked
                }
                &[selectedForLink=false] .itemLinkStateColumn > .itemSelectCheckbox:before{
                    content: "\f096"; // unchecked
                }
            } // listItem
        } // listItemGroup

        > .showMore{
            cursor: pointer;
            border: solid 1px lightgray;
            border-radius: 9px;

            padding: 0px;
            box-shadow: 2px 2px 2px #D8D8D8;
            font-weight: 300;
            font-size: 0.8em;
            background-color: #eee;
            height: 20px;
            width: calc(~"100% - 23px");

            text-align: center;
            position:absolute;
            left: 4px;
            //bottom: -25px;
            .transition(~"bottom 700ms ease 50ms");
            .keyframes(~'fade, 0%{opacity:1;} 50%{opacity:0;} 100% {opacity:1;}');

            > .MoreText{
                display:inline-block;
                vertical-align: top;
                top: 2px;
                position: relative;
            }
            > .Count{
                font-size: 0.9em;
                top: 3px;
                position: relative;
                color:gray;
                &.CountAbove{
                    float:left;
                    margin-left: 3px;
                }
                &.CountBelow{
                    float:right;
                    margin-right: 3px;
                }
            }

            &:hover{
                //background-color: darken(lightgray,0%);
                box-shadow: 2px 2px 2px gray;
                span.MoreText{
                    text-decoration: underline;
                }
            }
        }
        select.listSortOptionSelect{
            bottom:0px;
        }
        &[showRank=true]{
            .itemRank{
                display: inline-block !important;
            }
            > .listHeader > .configRow > .itemRank{
                // color: orangered; // Does not look nice...
            }
            .adjustSortColumnWidth{
                margin-left: 13px;
            }
        }

        &[displaytype="grid"] {
            > .listItemGroup {
                .display(flex);
                .flex-direction(row);
                .flex-wrap(wrap);
                justify-content: space-around;
                -webkit-justify-content: space-around;
                > .listItem{
                    display: block;
                    .align-self(flex-start);
                    > .itemRank{
                        vertical-align: top;
                        margin-right: 2px;
                    }
                    > .content{
                        display: block;
                    }
                    > .itemToggleDetails{
                        display: block;
                        position: absolute;
                        z-index: 10;
                    }
                }
            }
        }
        &[displaytype="list"] {
            > .listHeader > .configRow > .adjustSortColumnWidth >.handle{
                display: block;
            }
            > .listItemGroup{
                > .listItem{
                    .display(flex);
                    .flex-direction(row);
                    width: 100%;
                    > .listSortColumn{
                        padding-right: 3px;
                        padding-top: 2px;
                        font-weight: 300;
                        text-align: right;
                        font-size: 0.8em;
                        cursor: default;
                        vertical-align: top;

                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    > .itemRank{
                        float: left;
                        margin-top: 4px;
                        width: 13px;
                    }
                    > .itemToggleDetails{
                        width: 18px;
                        padding-top: 2px;
                        text-align: center;
                    }
                    > .content{
                        .flex(1);
                    }
                }
            }
            &[detailsToggle="zoom"] {
                > .listItemGroup > .listItem > .itemToggleDetails{
                    display: inline-block;
                }
            }
            &[detailsToggle="one"] {
                > .listItemGroup > .listItem > .itemToggleDetails{
                    display: inline-block;
                    > .item_details_toggle:before{
                        content: "\f078";
                    }
                }
            }
        }
        &[detailsToggle="zoom"] {
            > .listItemGroup > .listItem > .itemToggleDetails > .item_details_toggle:before{
                content: "\f140";
            }
        }
    } // div.listDiv

    .scrollToTop{
        display:inline-block;
        visibility: hidden;
        color: red;
        cursor: pointer;
        color: #aaaaaa;
        .transition(~'color 300ms ease-in-out');
        &:hover{
            color:#cb5454;
        }
    }

    .listHeader{
        font-weight: bold;
        color: black;
        font-size: 0.9em;
        position: relative;
        border-style: solid;
        border-color: #dfd2a9;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-width: 0px 2px;
        // .background-image(~"linear-gradient(bottom, rgb(229, 222, 200) 0%, rgb(246, 243, 235) 80%)");
        background-color: @color_listHeader_background;
        .totalViz{
            height: 3px;
            margin-top: 1px;
            margin-bottom: 1px;
            position:relative;
            > .aggr{
                cursor: default !important;
                left: 0px;
                top: 0px;
                height: 100%;
                .transition(~'all 200ms ease-in-out');

                &.total{
                    width: 100%;
                }
                &.preview{
                    transform: inherit;
                }
            }
        }
        > .bottomRow{
            .display(flex);
            .flex-direction(row);
            min-height: 18px;
            > .itemRank{
                display: none;
                width: 13px;
                text-align: right;
                font-weight: 100;
                font-size: 0.9em;
                &:before{
                    content: "#";
                }
            }
            > .header_listSortColumn{
                .align-self(flex-end);
                white-space: nowrap;
                text-align: right;
                padding-right: 1px;
                position: relative;
                > .sortColumnName{
                    font-weight: 300;
                    font-size: 0.9em;
                    margin: 0px 0px 1px 3px;
                    display: inline-block;
                    cursor: default;
                    .user-select(none);
                }
                > .dropZone_resultSort{
                    display: none;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 50;
                    background-color: rgba(234, 234, 234, 1);
                    border-radius: 5px;
                    border-style: solid;
                    border-width: 2px;
                    border-color: gray;
                    text-align: center;
                    > .dropZone_resultSort_text{
                        pointer-events: none;
                        font-size: 0.8em;
                        display: block;
                        font-weight: 300;
                    }
                    &:hover{
                        background-color: rgb(255, 188, 163);
                    }
                }
            }
            > .sortColumn {
                .align-self(flex-end);
                width: 17px;
                font-size: 0.8em;
                margin-bottom: 2px;
                vertical-align: bottom;
                > .sortButton{
                    padding: 2px;
                }
            }
            > .scrollToTop{
                vertical-align: bottom;
                text-align: right;
                width: 15px;
//                    float: right;
//                    height: 100%;
//                    margin-bottom: -3px;
            }

            > .headerLinkStateColumn{
                font-size: 1.1em;
                text-align: right;
                width: 85px;
                > .linkAll{
                    > .fa-link{
                        cursor: pointer;
                        font-size: 0.9em;
                    }
                    > .headerLinkColumnAllResults{
                        cursor: pointer;
                        margin-right: 2px;
                        font-size: 0.8em;
                        font-weight: 300;
                        font-family: sans-serif;
                    }
                    &:hover{ color: orangered; }
                }

                > .linkTitleText{
/*                        font-size: 0.8em;
                    font-variant: small-caps;
                    font-weight: 300;
                    cursor: default;*/
                    display: block;
                    font-size: 1.0em;
                    font-weight: 700;
                    cursor: default;
                    font-variant: small-caps;
                    pointer-events: all;
                    height: 16px;
                    margin-left: 2px;
                }
            }
            > .filtercrumbs{
                .flex(1);
                font-size: 0.9em;
                vertical-align: top;
                > .filter-block{
                    display: inline-block;
                    position: relative;
                    cursor: pointer;
                    color: rgb(37, 33, 18);
                    font-weight: 300;
                    // border: 1px rgb(104, 91, 43) solid;
                    box-shadow: 1px 1px 1px rgb(78, 71, 43);
                    background-color: rgba(255,255,255,0.5);
                    margin-right: 5px;
                    padding-left: 2px;
                    max-width: 0px;
                    .transition(~"all 250ms linear");
                    > .sdsdsds{
                        pointer-events: none;
                        /*
                        max-width: 300px;
                        max-width: 300px;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;*/
                        display: block;
                        // margin-right: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        > .filterHeader{
                            padding: 1px;
                            font-size: 0.9em;
                            font-weight: 700;
                            &:after{
                                content: ': ';
                            }
                        }
                        > .filterDetails{
                            padding:1px 0px 1px 0px;
                            display: inline;
                            margin-right: 15px;
                        }
                    }
                    > .chartClearFilterButton.summary{
                        pointer-events: none;
                    }
                    &[ready=true]{
        //                opacity: 1;
                        max-width: 100%;
                    }
                    &[ready=false]{
        //                opacity: 1;
                        max-width: 0px;
                        .chartClearFilterButton{
                            display:none;
                        }
                    }
                    &:hover{
                        background-color: rgba(255,255,255,1.0);
                        .sdsdsds{
                            text-decoration: line-through;
                        }
                        .chartClearFilterButton{
                            background-color: #B6AF96;
                            color: #635d46;
                        }
                    }
                    b{ font-weight: 700; }
                    &[filtered=false]{ display: none; }
                }
            }
        } // bottomRow

        > .configRow{
            display: none;
            height: 18px;
            position: relative;
            border-top: dotted 1px rgb(153, 147, 131);
            background-color: rgb(229, 226, 218);
            > .itemRank{
                display: inline-block;
                position: absolute;
                width: 13px;
                text-align: right;
                z-index: 10;
                cursor: pointer;
                color: gray;
                .user-select(none);
                > .fa:before{
                    content: "\f102";
                }
                &:hover{
                    color: black;
                }
            }
            > .adjustSortColumnWidth{
                display: inline-block;
                position: relative;
                height: 100%;
                text-align: center;
                > .handle{
                    display: none;
                    position: absolute;
                    right: 0px;
                    cursor: ew-resize;
                    top: 0px;
                    height: 100%;
                    width: 3px;
                    border-left: solid 1px gray;
                    border-right: solid 1px gray;
                }
                >.removeSortOption{
                    cursor: pointer;
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    color:gray;
                    &:before{
                        content: "\f00d";
                    }
                    &:hover{
                        color: black;
                    }
                }
            }
        }// configRow

        .filterClearAll{
            opacity: 0;
            pointer-events: none;
            .align-self(center);
            right: 41px;
            top: 0px;
            cursor: pointer;
            color: #252112;
            font-weight: 300;
            border: 1px #685b2b solid;
            background-color: #E9E2CE;
            padding-left: 1px;
            .transition(~"background-color 100ms linear, opacity 300ms linear");
            &:hover{
                background-color: white;
                box-shadow: none;
            }
            .title{
                font-size: 0.8em;
                padding-left: 1px;
                vertical-align: middle;
            }
        }

        > .topRow {
            .display(flex);
            .flex-direction(row);
            > .resultInfo{
                vertical-align: top;
                display: block;
                white-space: nowrap;
                pointer-events: none;
                font-size: 1.5em;
                font-weight: 700;
                text-shadow: 1px 1px lightgray;
                margin-bottom: -3px;

                .listHeader_count{
                    display: inline-block;
                    text-align: right;
                    // min-width: 50px;
                    vertical-align: top;
                    margin-right: 4px;
                }
                .listHeader_itemName{
                    margin-right: 4px;
                }
            }
            > .mainTextSearch {
                .flex(1);
                .align-self(flex-end);
                white-space: nowrap;
                display: inline-block;
                vertical-align: bottom;
                position: relative;
                height: 18px;
                > .dropZone_textSearch{
                    display: none;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 50;
                    background-color: rgba(234, 234, 234, 1);
                    border-radius: 5px;
                    border-style: solid;
                    border-width: 2px;
                    border-color: gray;
                    text-align: center;
                    > .dropZone_textSearch_text{
                        pointer-events: none;
                        font-size: 0.7em;
                        display: block;
                        font-weight: 300;
                    }
                    &:hover{
                        background-color: rgb(255, 188, 163);
                    }
                }
                > .mainTextSearch_input{
                    display: none;
                    font-size: 0.8em;
                    font-weight: 700;
                    color: #cb5454;
                    padding: 0px 2px;
                    background-color:rgba(255, 255, 255, 0);
                    pointer-events: all;
                    border-width:0px;
                    border-style: solid;
                    border-color: #cb5454;
                    margin: 1px;
                    width: calc(~"100% - 17px");
                    &:focus{
                        outline-color: #cb5454;
                        outline-width: 1px;
                    }
                    &:hover{
                        border-width: 1px;
                        background-color: white;
                        margin: 0px;
                        //padding: 0px 1px;
                        //margin: 0px 1px;
        //                padding: 0px 0px 1px 0px;
                    }
                    &::-webkit-input-placeholder{
                        color: #cb5454;
                        font-weight: 300;
                    }
                    &:focus::-webkit-input-placeholder{
                        color: #F3CDCD;
                    }
                }
                > .searchIcon{
                    display: none;
                    padding-left: 1px;
                    color: #cb5454;
                }
                > .clearText{
                    display: none;
                    position: absolute;
                    right: 4px;
                    top: 2px;
                    cursor: pointer;
                    color:gray;
                    &:hover{
                        color: #cb5454;
                    }
                }
                &[isActive="true"]{
                    > .mainTextSearch_input{
                        display: inline-block;
                    }
                    > .searchIcon{
                        display: inline-block;
                    }
                }
            } // mainTextSearch

            > .rightBoxes{
                right: 0px;
                top: -1px;
                font-size: 1.3em;
                color: #635d46;
                text-align: right;
                white-space: nowrap;
                .fa{
                    cursor: pointer;
                    margin-left: 2px;
                    &:hover{ color: #cb5454; }
                }
                .showConfigButton{
                    &:hover{
                        animation: fa-spin 2s infinite linear;
                        -webkit-animation: fa-spin 2s infinite linear;
                    }
                }
                .datasource{
                    display: none;
                    cursor: pointer;
                    text-decoration: none;
                    color: #635d46; // if dom type is a, it will show visited links in different color
                }
            }

        } // topRow
    } // listHeader

    .boxinbox{
        margin-top:10px;
        &:hover{
            background-color: #EFEFEF;
        }
        ul{
            margin: 5px 0px 5px 0px;
        }
        &.features{
            width:500px;
            text-align:left;
            border: solid 0px lightgray;
            box-shadow: 0px 0px 0px gray;
            .credits_features {
                margin-top: 4px;
                padding-left: 20px;
            }
        }
        &.project_credits{
            font-size: 0.9em;
            font-style: italic;
            a.myName{
                display: inline-block;
                margin: 17px 10px;
                vertical-align: top;
                color: black;
                font-weight: 700;
                font-style: normal;
                text-decoration: none;
            }
        }
        &.project_3rdparty img{
            position:relative;
        }
    } // boxinbox
}

.tipsy {
    font-size: 10px;
    position: absolute;
    padding: 5px;
    z-index: 100000;
    pointer-events: none;
    .tipsy-inner {
        font-family: Helvetica, Arial, sans-serif;
        padding: 3px;
        font-size: 1.2em;
        background-color: #000;
        color: #FFF;
        max-width: 200px;
        text-align: center;
        font-weight: 300px;
        border-radius: 3px;
    }
    .tipsy-inner{
        span.big{
            font-size: 1.4em;
        }
        span.action{
            font-weight: 700;
        }
    }
    &.tipsyFilterAnd{
        .tipsy-inner{
            background-color: @color_query_and;
        }
        .tipsy-arrow{
            border-color: @color_query_and;
        }
    }
    &.tipsyFilterOr{
        .tipsy-inner{
            background-color: @color_query_or;
        }
        .tipsy-arrow{
            border-color: @color_query_or;
        }
    }
    &.tipsyFilterNot{
        .tipsy-inner{
            background-color: @color_query_not;
        }
        .tipsy-arrow{
            border-color: @color_query_not;
        }
    }
    &.tipsyFilterLock{
        .tipsy-inner{
            background-color: @color_preview_compare;
        }
        .tipsy-arrow{
            border-color: @color_preview_compare;
        }
    }

}

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent !important; border-right-color: transparent !important;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent !important; border-right-color: transparent !important;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent !important; border-right-color: transparent !important; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent !important; border-bottom-color: transparent !important; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent !important; border-bottom-color: transparent !important; }

.mixi-frames () {
    from { .transform(scale(1) )}
    to { .transform(scale(0.5) )}
}
@-webkit-keyframes shrink {.mixi-frames;}
@-moz-keyframes shrink {.mixi-frames;}
@-ms-keyframes shrink {.mixi-frames;}
@-o-keyframes shrink {.mixi-frames;}
@keyframes shrink {.mixi-frames;}