@import 'setup';

// Intro
#analytics-more-text-toggle {
    @include text-link;
    + #analytics-more-text {
      display:none;
    }
}

// Top Downloads Charts
.analytics-table-row {
    td {
        &:first-of-type {
            border-right-width:0;
        }
        &:nth-of-type(2) {
            border-left-width:0;
            padding-left:0;
        }
    }

    #album-artwork {
        display:table-cell;
        height:30px;
        overflow:hidden;
        vertical-align:middle;
    }

    #more-text {
        background: url("../images/redesign/top-charts-hover.svg") no-repeat right center;
        display: none;
        font-size: 11px;
        font-weight: 500;
        height: 25px;
        padding-right: 26px;
        vertical-align: middle;
    }

    &:hover {

        cursor:pointer;

        #more-text {
            display:table-cell;
        }

        #row-total {
            display:none;
        }

    }

    #total-number {
        width:50px !important;
    }

    #row-total {
        display:table-cell;
        height:22px;
        text-align:right;
        vertical-align:middle;
        width:50px;
    }

}

#album-artwork {
    img {
        width:30px !important;
    }
}

#album-info {

    .h5,small {
        display:block;
        margin:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:148px;
    }
    small {
        color:$gray-darker;
    }
}

.graph-holder path {
    fill: none;
    stroke:#b9b9b9;
}

.axis line {
    stroke:white;
    stroke-width:0.5;
}

.x.axis line {
    stroke:black;
}

.striping line {
    stroke:#c9c9c9;
    stroke-width:0.5;
}

path.domain {
    stroke-width:0.5;
}

g.tick {
    text {
        @include transform(translateY(2px));
    }
}

g.striping {
    g.tick {
        text {
            @include transform(translateY(10px));
        }
    }
}

g.striping {
    g.tick:first-of-type {
        text {
            @include transform(translateX(-9999px));
        }
    }
}

path.area {
    fill:rgba(16,116,190,0.2);
}

rect.overlay.background {
    fill: url(#gradient);
}
.stop1, .stop2, .stop5, .stop6 {
    stop-color:#f9f9f9;
}
.stop3, .stop4, .stop7, .stop8 {
    stop-color: #f4f4f4;
}

.y.axis > .tick text {
    transform:translateY(-10px);
}

.x.axis > .tick text {
    transform:translateY(8px) translateX(14px);
}

.overlay {
    fill:none;
    pointer-events: all;
}
.dot {
    fill:$blue-medium;
}

.btn-default.hasDatepicker {
	position:relative;
	text-transform:uppercase;
}

.graph, .graph-holder {
    position:relative;
    height:149px;
}

.graph {
    margin-bottom:20px;

    .well {
        background:#fff;
        border-color:#b9b9b9;
        box-shadow:inset 0 0 3px rgba(0,0,0,0.18);
        margin-bottom:0;
        max-height:151px;
        padding:0;

        > div.pull-left {
            height:149px;
            padding:5px 7px;
            width:168px;

            h4:first-of-type {
                border-bottom: 1px solid $gray-light;
                margin-bottom: 4px;
                max-height: 50px;
                overflow: hidden;
                padding-bottom: 2px;
                font-size: 15px;
                font-weight: normal;
                margin-top: 0;
            }

        }

        > div.pull-right {
            background: $grey-medium;
            border-left: 1px solid $gray;
            border-radius: 0 4px 4px 0;
            width: calc(100% - 168px);
        }

    }

    table {
        background:transparent;
    }

}

#graphs_list {
    margin-left: 13px;
    margin-right: 13px;
    position: relative;

    h3:first-of-type {
        line-height: 1.2;
    }

    .active-date {
        margin-top: 0;
    }

}

#top-charts {
    
    small {
        display: block;
        padding-top: 10px;
    }
    
}

.drag-handle {

    cursor:hand;
    margin-top:-6px;
    left:-13px;
    position:absolute;
    top:50%;

}

.active-date {
    @extend .small;

    color:$gray;
    font-size:9px;
    margin-bottom:3px;
    text-transform:uppercase;
}

table.graph-totals {

    background-color:transparent;

    tr {
        td {
            p.lead,p {
                margin-bottom:0;
                padding-right:6px;
            }
        }

        td:first-of-type {
            white-space:nowrap;
            width:1px;
        }

        td:last-of-type {
            border-bottom:1px solid $blue-medium;
            color:$blue-medium;
        }
    }
}

.drag-handle {
    > .bar {
        background:#afadaf;
        box-shadow:inset 0 1px 0 rgba(0,0,0,0.5);
        display:block;
        height:3px;
        margin-bottom:3px;
        width:11px;
    }
}

.arrow.top-center:before,.arrow.top-center:after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top:0;
    left: 50%;
    margin-left: -10px;
}

.arrow.top-center:before {
    border-bottom: 10px solid #4a4a4a;
    margin-top: -9px;
    z-index: 1;
}

.arrow.top-center:after {
    border-bottom: 10px solid #808080;
    top:-10px;
}

.arrow.top-right {
    margin-top:10px;
}

.arrow.top-right:before,.arrow.top-right:after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top:0;
    left:100%;
    margin-left:-23px;
}

.arrow.top-right:before {
    border-bottom: 10px solid #4a4a4a;
    margin-top: -18px;
    z-index: 1;
}

.arrow.top-right:after {
    border-bottom: 10px solid #808080;
    top:-10px;
}

#graphs {
    .popover {
        @extend .arrow.top-center;
        width:190px;

        input,select {
            font-size:11px;
        }
    }
}

#btn-share {
    @include vertical-align;
}

.detail-dropdown {

    position:relative;

}

.detail-dropdown {
    
   .dropdown-menu {
       
       .track {
           background:none;
           height:auto;
           left:0px;
           width:auto;
           top:0;
           position: inherit;
        } 
            
   }
   
}

#filter-by {

    div[id*="_ids_wrap"] {
        margin-right:12px;
    }

}

// SHARE URL BUTTON
#shareUrlDiv {
    float:right;
    margin-top: 30px;
    position:relative;
    margin-bottom: 0px;

    &.shareBtn {
        margin: 0px 0px 0px 5px;

        .popover input {
            font-size: 12px;
         }
    }

    .popover {
        @extend .arrow.top-right;

        left:auto;
        right:0;
        top:25px;
        width:250px;
    }
}

.event-btn-section {

    .btn {
        min-width: 100px;
    }

}

// CARDS
#dim_wrap {

    background-color: $bg-gray-lightest;
    border:none;
    border-radius: $border-radius-small;
    padding:10px 10px 10px 5px;

    > div[id*="_wrap"] {

        @include display(flex);

        .dropdown {
            @include flex(2 0 0);

            margin:0 5px;
            max-width:413px;
            height:auto;

            &:nth-of-type(6) {
                display:none;
            }

            &:last-of-type,
            &:nth-of-type(5) {
                margin-right:0;
            }

            .card {
                width:100%;

                &.empty {

                    > .btn {

                        cursor:default;

                    }

                }

                p.small {
                    color:$gray;
                    font-style:italic;
                    margin:0;
                }

                .btn.dropdown__toggle {
                    appearance:normal;
                    -moz-appearance:normal;
                    -webkit-appearance:normal;
                    border-radius:$panel-border-radius;
                    height:100px;
                    padding:6px 9px;
                    vertical-align:top;
                    width:100%;
                    outline: 0;

                    h3,h4 {
                        margin-top:0;
                    }

                    h3 {
                        display:inline-block;
                        font-size: 18px;

                        .plus-sign {
                            float:right;
                            background:#f3f3f3;
                            border:1px solid rgba(255,255,255,0.5);
                            border-radius:100%;
                            -webkit-border-radius:100%;
                            box-shadow:inset 0 0 3px rgba(0,0,0,0.2),0 2px 3px rgba(0,0,0,0.2);
                            font-size:14px;
                            height:21px;
                            line-height:16px;
                            margin: 5px 0 0 12px;
                            text-align:center;
                            width:21px;
                        }

                    }

                    h4 {
                        float:none;
                        margin-left:0;
                    }

                    .p-code {
                        text-transform: initial;
                        font-weight: 500;
                        color: $blue-deep;
                        white-space: nowrap;
                        max-width: 100%;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                }

                .btn {
                    background: $white;
                    border: 1px solid $gray;
                    box-shadow: none;

                    h3 {
                        color:#808080;
                    }

                    &:hover {
                        background:#fff;
                        border:1px solid #a1a1a1;
                        box-shadow:none;
                        color:inherit;
                    }

                }

                .dropdown__body {

                    > div {
                        padding:0 14px;
                    }

                    input.dropdown__item-checkbox {
                        display:none;
                    }

                }

                > .card-close {
                    background:#f3f3f3;
                    border:1px solid rgba(255,255,255,0.75);
                    border-radius:50%;
                    box-shadow:0 1px 6px rgba(0,0,0,0.3);
                    color:$gray;
                    cursor:pointer;
                    font-size:14px;
                    font-weight:800;
                    height:18px;
                    line-height:14px;
                    position:absolute;
                    right:-6px;
                    text-align:center;
                    top:-6px;
                    width:18px;
                    z-index:3;
                }

                .dropdown__loading-indicator {
                    background:url(/images/select2-spinner.gif) no-repeat right center;
                    margin-right:14px;
                    padding:0 0 14px;
                }

                .form-control {
                    margin-bottom:4px;
                    margin-top:9px;
                }


            }

        }

    }

}

#dim_wrap > div[id*="_wrap"] .dropdown.dropdown--opened {

    .btn.dropdown__toggle {
        background:#fff;
        border:1px solid #a1a1a1;
        border-bottom:none;
        border-radius:$panel-border-radius $panel-border-radius 0 0;
        box-shadow:none;
        color:inherit;
        position:relative;
        z-index:501;

        &:hover {
            border-bottom:none;
        }
    }

}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .dropdown,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .dropdown {
    width:49.375%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .dropdown {
    width:32.5%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-4 .dropdown {
    width:24.0625%;
}


#dim_wrap.well-blue > div[id*="_wrap"].card-5 .dropdown,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .dropdown {
    width:19%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn img {
    @extend .pull-left;
    height:auto;
    margin-right:3.0725%;
}

#dim_wrap.well-blue > div[id*="_wrap"][class*="card-"] .card .btn h4 {
    font-size:21px;
    margin-bottom:6px;
    overflow:hidden;
    white-space:normal;
    width:100%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn img,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn img {
    max-width:20%;
    float: left;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn > .text-left,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn > .text-left {
    @extend .pull-left;

    width: 76.9275%;
    float: left;
    padding-top: 5px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-1 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-2 .card .btn h4 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize;
    height: auto;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn img {
    max-width:34%;
    float: left;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn > .text-left {
    @extend .pull-left;

    width:62.9275%;
    float: left;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-3 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn h4 {
    font-size:15px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize;
    height: auto;
}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn img {
    @extend .pull-right;

    border-radius: 50%;
    bottom: 6px;
    margin-left: 3.0725%;
    margin-right: 0;
    max-width: 18.75%;
    position: absolute;
    right: 9px;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-4 .card .btn > .text-left {
    @extend .pull-left;

    width:74.178%;
}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn h3,
#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn h3 {
    font-size: 13px;
    line-height: 22px;

    .plus-sign {
        margin-top: 0px;
    }

}

#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn img,
#breakdown #dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn img {
    @extend .pull-right;

    border-radius: 50%;
    bottom: 6px;
    margin-left: 3.0725%;
    margin-right: 0;
    max-width: 21.5%;
    position: absolute;
    right: 9px;
}

#dim_wrap.well-blue > div[id*="_wrap"] .card .btn img {
    max-height:90px;

}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn > .text-left,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn > .text-left {
    @extend .pull-left;

    width: 75%;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn h4,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn h4 {
    font-size:14px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize;
    height: auto;
}

#dim_wrap.well-blue > div[id*="_wrap"].card-5 .card .btn p.small,
#dim_wrap.well-blue > div[id*="_wrap"].card-6 .card .btn p.small {
    width:60%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .axis line {
        stroke-width:1;
    }

    .striping line {
        stroke-width:1;
    }

    path.domain {
        stroke-width:1;
    }

}


#data-sources-link {
    padding-right:36px;
    position:relative;

    &:after {
        @include transition (background 0.15s linear);
        background:$blue-deep;
        border-radius:100%;
        color:#fff;
        content:"i";
        font-family:'Times New Roman',serif;
        font-size:14px;
        font-style:italic;
        height:17px;
        right:11px;
        line-height:17px;
        position:absolute;
        text-align:center;
        text-transform:lowercase;
        top:3px;
        width:17px;
    }
    &:hover {
        &:after {
            background:$blue-medium;
        }
    }

}

#analytics-disclaimer {

    color:$gray;

    b {
        @extend .small;

        color:$orange-create;
    }
}

table#bars {

    tr {
        td:nth-of-type(3) {
            border-right:none;
        }
        td:nth-of-type(4) {
            border-left:none;
        }

        .checkbox {
            margin: 0px; 
        }

    }

    .breakdown-title {

        > div {
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width:252px;
        }

    }

    .percentage-bar {
        background:$gray-light;
        height:20px;

        &.breakdown-0 {
            background:#a513b2;
        }

        &.breakdown-1 {
            background:$green-update;
        }

        &.breakdown-2 {
            background:$orange-create;
        }

        &.breakdown-3 {
            background:$red-destroy;
        }

    }

}

#breakdown {
    
    .btn-multiselect {
        
        padding-top: 12px;
        
    }

    h6 {
        margin-top: 0px;
    }

}

h3.grand-total {
    margin:0 0 4px;
}

.hide-channel {
    bottom:4px;
    cursor:pointer;
    position:absolute;
    text-decoration:underline;
}

.active-total {
    margin:0;
}

#barchart {

    .row {

        h4 {

            line-height:24px;
            margin:0;

             + .btn-multiselect {
            margin-left:12px;
            }

        }

    }

}

svg.chart {
    > g {
        font-size:9px;
    }

    [data-obj-id="dotall-sales"] {
        fill:$blue-medium;
    }

    [data-obj-id="dot0"] {
        fill:#a513b2;
    }

    [data-obj-id="dot1"] {
        fill:$green-update;
    }

    [data-obj-id="dot2"] {
        fill:$orange-create;
    }

    [data-obj-id="dot3"] {
        fill:$red-destroy;
    }

    .line {
        path {
            stroke:$blue-medium;
            stroke-width:1px;
            fill:none;
        }

        &.breakdown-0 {

            path{

                stroke:#a513b2;

            }

            circle.dot {
                fill:#a513b2;
            }
        }

        &.breakdown-1 {

            path {

                stroke:$green-update;

            }

            circle.dot {
                fill:$green-update;
            }

        }

        &.breakdown-2 {

            path {

                stroke:$orange-create;

            }

            circle.dot {
                fill:$orange-create;
            }

        }

        &.breakdown-3 {

            path {

                stroke:$red-destroy;

            }

            circle.dot {
                fill:$red-destroy;
            }

        }

    }

}

.graph-totals-container {
    overflow:hidden;
    width:154px;
}

.active-total {

    .graph-point-sales {
        font-size:14px;
        text-align:right;
    }

    .graph-point-name {
        font-size: 12px;

        > div:first-of-type {
            line-height:1.5;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            max-width:140px;
        }

    }

    .graph-point-line {
        height:1px;
        margin-bottom:3px;
    }

    .breakdown-all-sales {

        .graph-point-name {
            color: $gray-darkest;
        }

        .graph-point-line {
            background:$blue-medium;
        }

    }

    .breakdown-0 {

        .graph-point-name {
            color:#a513b2;
        }

        .graph-point-line {
            background:#a513b2;
        }

    }

    .breakdown-1 {

        .graph-point-name {
            color:$green-update;
        }

        .graph-point-line {
            background:$green-update;
        }

    }

    .breakdown-2 {

        .graph-point-name {
            color:$orange-create;
        }

        .graph-point-line {
            background:$orange-create;
        }

    }

    .breakdown-3 {

        .graph-point-name {
            color:$red-destroy;
        }

        .graph-point-line {
            background:$red-destroy;
        }

    }

}

#event_form {

    .btn-default.hasDatepicker {
        float:none !important;
    }

    .tt-hint {
        background: $white;
    }

}

tr[class*="bar_child_"] {
    b {
        display:inline-block;
        max-width:350px;
        overflow:hidden;
        padding-left:14px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

.table-striped > tbody > tr[class*="bar_child_"] > td {
    background-color:#fff;
}

.expand {
    background-image:url('../../alw/images/btns/plus_minus.png');
    background-position:0 0;
    cursor:pointer;
    height:18px;
    width:18px;
}

.expand.minus {
    background-position:0 -18px;
}

.expand.loading {
    background-image:url('../../alw/images/btns/spinnerLarge.gif');
    height:16px;
    width:16px;
}

.data-sources {

    .helptip {
        text-align:left;
    }

}

.graph-event {
    border-left:1px solid $gray;
    height:134px;
    position:absolute;
    top:17px;

    .graph-event-container {
        background:#fff;
        border:1px solid $gray;
        border-radius:$border-radius-base;
        box-shadow:0 1px 6px rgba(0,0,0,0.15);
        font-size:$font-size-small;
        margin-left:-200px;
        padding:$padding-small-vertical $padding-small-horizontal;
        width:200px;
        display:none;

        div:first-of-type {
            font-weight:500;
            margin-bottom:6px;
        }

    }

}

.graphs {

    #loading_graphs {

        &.progress-striped {
            left: 50%;
            margin: 10px 0;
            margin-left: -221px !important;
            position: absolute;
            width: 442px;
            z-index: 1030;
            max-width: 100%;
            padding: 10px 20px;
            height: auto;
            border: 1px solid #acacac;
            text-align: center;
            background: #fff;
            color: #4A4A4A;
        }

        .progress-bar {
            height: 12px;
            margin: 10px 0;
        }

    }

}

.card-dropdown-info {
    padding-left: 6px;
    overflow: hidden;
    padding-top: 5px;
    display: block;
    vertical-align: middle;

    .small {
        color:$gray;
    }

    .info-details > .small {
        max-width: 49%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

}

#top-downloads small {
    display: block;
    font-size: 12px;
    font-style: italic;
    padding-top: 5px;
}

.beta-banner {
    background-color:#faa635;
    font-size:14px;
    font-weight:500;
    padding:12px 8px;
    text-align:center;
    color:white;

    a {
        color:white;
        text-decoration:underline;
        font-weight:bold;
    }
}

#bars {

    thead {

        > tr {

            > td {
                background-color:rgba(16,116,190,0.2);
                font-weight:$headings-font-weight;
            }
        }

    }

}

.date-picker {

    .pull-left {
        
        margin-right: 12px; 
    
        > h6 {
            margin: 0 0 9px;
        }
        
        .btn-default.hasDatepicker {
            background: url("/images/redesign/calendar.svg") no-repeat 90px 5px;
            max-width: 115px;
            padding: 8px 24px 7px 2px;
        }
    
    }
    
    .btn-multiselect {
        margin-top: 16px;
    } 

}

%analytics_dropdown {

    .dropdown__body {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1031;
        display: none;
        float: left;
        width: 250px;
        padding: 5px 0;
        margin: 4px 0 0;
        list-style: none;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid #a1a1a1;
        border-radius: 5px;
        
        .dropdown-input {
            padding: 5px 18px 0 15px;
        }

        .dropdown__list {
            padding: 0px;
        }

        .dropdown__list {
            max-height: 360px;
            min-height: 1px;
            overflow-y: scroll;
            line-height: 18px;

            li label {
                cursor: pointer;
                font-weight: 400;
                margin: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: middle;
                display: table;
                min-height: 22px;
                text-transform: capitalize;
            }

            .checkbox {
                margin: 0px;
            }

        }

    }

    .dropdown.dropdown--opened {

        .dropdown__body {
            display: block;
        }

    }

}


.dropdown__body.dropdown--opened {
    
    display: block;
     
}

.dropdown__menu {
    
    li {
        
        cursor: pointer;
        padding: 6px 14px;
        vertical-align: middle;
        width: 100%;
        
        &:hover {
            background: #1e90ff;
            color: #fff;
            cursor: pointer;               

            label {
                color: $white;
            }

        }
        
        img {
          
                height: auto;
                max-width: 40px;
        } 
        
    }
    
}


#source_type_ids_wrap,
#country_ids_wrap,
#paid_free_ids_wrap {
    
    padding-top:5px;
    
    @extend %analytics_dropdown;

    #loading_graphs {
        position: initial;
        max-width: 100%;
        padding: 10px 20px 0px;
        margin: 17px auto;
        height: auto;
        border: 1px solid #acacac;
        width: 65%;
        text-align:center;

        .progress-bar {
            height: 12px;
        }

    }

    .form-group {
        margin-top: 10px;
    }

}

#paid_free_ids_wrap {
    .paid-free-btn.active {
        z-index: 1;
    }
}


#dim_wrap div[id*="_ids_wrap"] {
    @extend %analytics_dropdown;

    .dropdown__body {
        width: 120%;
        margin-top :0;

        .dropdown__list > li {
            padding: 0;

            label {
                display: block;
                padding: 6px 14px;
            }

        }

    }

}

.main-content {
    
    min-height: 830px;
    
}

.twitter-typeahead {
    
    width: 100%;
    
    .tt-dropdown-menu {
        
        width: 100%;
        
    }
        
    .tt-suggestions {
        width: 100%;
        background-color: #fff;
        border-top: none;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 1px 1px #aaa;
        padding: 6px 0 0;
        border: 1px solid #ccc;
        max-height: 300px;
        overflow-y: auto; 
        
        .tt-suggestion {
            
            p {
               padding: 6px;
               margin: 0;

                &:hover {
                    background: #1e90ff;
                    color: #fff;
                    cursor: pointer;               
                }

            }

        }
        
    }
    
}

.analytics-tooltip-top-position {
    bottom: 25px;
    right: -60px;
    margin-left: 52px;
}

.paidTooltip {
    display: inline;

    .tooltip-top-position {
        bottom: 55px;
        margin-left: 11px;
    }
}

// Mobile Analytics
.mobile-analytics {

    .app-instructions {

        .column {

            &:first-child {
                border-right: 2px solid $gray-light;
            }

            .os-title {
                margin-bottom: 10px;
            }

            .step-guide {
                margin-bottom: 15px;
            }

            .app-img {
                margin-bottom: 40px;
            }

        }       

    }

}

.analyticsListBoxes {
    
    > ul {
        
        > a {
            padding: 5px;
            display: block;
            text-decoration: none;
            background: $white;
            color: $gray-darkest;
        }
        
    }
    
}

.label-bold {
    color: $grey;
    font-weight: $font-weight-bold;
    padding-bottom: $padding-small-vertical;
    text-transform: uppercase;
}

.top-charts-streams {
    .help-col {
        padding-top: 28px;

        .helptip {
            margin: 0;

            &:before {
                display: none;
            }

            .tooltip {
                &:before {
                    margin-left: 35px;
                }
            }
        }

        .info-icon {
            margin-left: 2px;
        }
    }

    .analytics-table-row {
        border-top: 1px solid $warm-grey;

        td {
            border: 0;

            &:nth-of-type(2) {
                max-width: 110px;
            }
        }

        #album-artwork {
            height: 50px;

            img {
                border-radius: 3px;
                height: 50px;
                width: 50px !important;
            }
        }

        #album-info {
            .h5,
            small {
                max-width: 94px;
                width: auto;
            }
        }

        #row-total {
            color: $grey;
            font-size: 14px;
        }

        &:hover {
            background: $btn-default-hover-bg;
            cursor: pointer;

            #more-text {
                display: none;
            }

            #row-total {
                display: table-cell;
            }
        }

        #album-info {
            small {
                font-style: normal;
            }
        }
    }

    .top-download-item {
        display: none;

        &.item-disabled {
            opacity: .3;

            .md-txt {
                font-size: $heading-font-size-md;
            }

            td {
                border: 0;
                padding-top: 50px;
            }
        }
    }
}

.no-data {
    color: $gray-darker;
    display: none;
    font-size: $heading-font-size-md;
    margin-top: 50px;
}

.top-charts-stream-loader {
    background-color: #fff;
    margin-bottom: -50px;
    padding-top: 100px;
}

//Bubble Loader for Analytics Graphs & Bars
.analytics-loader-wrapper {
    position: relative;

    &.loader-space {
        min-height: 80px;
    }

    .analytics-loader {
        position: absolute;
        width: 100%;
        height: 100%;

        .LoadingIndicator {
            position: initial;

            .LoadingIndicator-outer {
                align-items: flex-start;
                z-index: 99999;
                background: white;
                opacity: 0.9;
            }

            .LoadingIndicator-dots {
                margin-top: 22px;
            }

        }

    }

}

.analytics-source-list {
    tbody tr td {
        vertical-align: middle;
    }

    tr {
        img {
            margin-right: 10px;
            max-height: 100%;
        }

        td:first-child {
            height: 90px;
            text-align: center;
        }
    }
}

#downloadErrorMessage {
    margin-top: 10px;

    .alert-icon {
        font-size: 22px;
        margin: 0 15px 0 5px;
        line-height: 28px;
    }

    #clearMessage {
        cursor: pointer;
        font-weight: $font-weight-bold;
        margin-top: 12px;
        text-decoration: none;
    }

}

.dropdown_group_view {
    .collection-checkbox {
        display: inline-block;
        padding: 6px 14px;
        width: 100%;
        background: $bg-gray-lightest;
        border: 1px solid lightgrey;

        .collection-checkbox-content {
            display: initial!important;
        }
        span.parent_count {
            margin-left: 5px;
        }

        span.caret {
            background: url("../images/redesign/btn-caret.svg") no-repeat center center;
            background-size: 100%;
            transform: rotate(180deg);
            border: none;
            width: 12px;
            height: 12px;
            margin: 1px 0 0 4px;
            float: right;
        }
    }
}

.child-toggle-dropdown-group {
    .child-checkbox {
        padding: 5px 0px 5px 20px;

        .child-checkbox-content {
            display: initial!important;
        }
        &:hover {
            background: $dropdown-link-child-hover-bg;
            color: $dropdown-link-hover-color;
            cursor: pointer;               

            label {
                color: $white;
            }
        }
    }
}