@import 'setup';

// Map container
.map-container {
    float: none;
    height: 500px;
    position: relative;

    .map-canvas {
        border-radius: $border-radius-large;
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    #spinner {
        @include transform(translateY(-50%));
        margin:0 0 0 -25% !important;
        left:50%;
        position:absolute;
        top:50%;
        z-index:2;
    }

    .progress-striped {
        background: #fff;
        border: 1px solid #acacac;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        height: auto;
        margin: 17px auto !important;
        padding: 10px 20px 0px;
        width: 50%;
        max-width: 100%;

        .progress-bar {
            border: 1px solid #acacac;
            height: 12px;
            margin-bottom: 10px;
            margin-top: 10px;
            width: 100%;
            background-color: #bbb;
        }

        > div {
            font-size: 14px;
            font-weight: 500;
            margin: 10px 0;
            text-align: center;
            color: #4A4A4A;
        }

    }

}

.twitter-typeahead {
    
    margin-top: 8px;
    width: 100%;
    
    .tt-dropdown-menu {
        width: 100%;
    }

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

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

            }

        }
    }
    
}

#display-release-container {

    #currently-viewing-container {

        .pull-left:first-of-type {
            margin-right:6px;

            .thumb-placeholder {
                background:#fff;
                border:1px solid #d1d0d0;
                height:36px;
                width:36px;
            }

        }

    }

    h4 {

        + p {
            font-size:13px;
            font-weight:300;
            margin-bottom:0;
        }
    }

    #total-stats-container {

        h4:first-of-type,
        small {
            margin-left:6px;
        }

        small {
            color:$gray;
        }

    }

}

.heatmap-form-border {
    border-bottom: 1px solid $gray-light;
    margin-bottom: 20px;

    .panel {
        margin-bottom: 0px;
    }

}

#display-entity-container {
    
    #total-stats-container {
        
        > div {
          
            div:last-child {
            
                clear: both;  
            
            }
            
        }
        
    }
    
    h4 {
        font-size: 15px;
        margin-top: 0px;
    }

    .img-thumbnail {
        margin-right: 5px;
    }

    h6 {
        margin-top: 0px;
    }

}

.channel-select {

    button {
        width:75%;
    }

}

.view-by-title {
    margin-top: 0px;
}

#channel-select {
    margin-top:8px;
}
 
// Marker styles
.cluster {

    border-radius:100%;
    text-align:center;

    &.cluster-border {
        border:4px solid rgba(255,255,255,0.5);
        box-sizing:content-box;
    }

}

#analytics-disclaimer {

    color:$gray;

    b {
        @extend small;

        color:$orange-create;
    }
}

.cluster,
.cluster-info-window {
    -webkit-user-select: none;
}

.cluster-info-window {
    line-height:1.35;
    overflow:hidden;
    -webkit-user-select:none;
    white-space:nowrap;
}

.date-picker {
    
    .pull-left {
        margin-right: 12px;
    }

}

.date-picker {
    
    .pull-left {
        
        > h6 {
            margin-bottom: 8.5px;
        }
    
    }

}

.date-picker {

    label {
        display: block;
        margin-bottom: 6px;
    }

    .btn-default.hasDatepicker {
        background: url("/images/redesign/calendar.svg") no-repeat scroll 82px 4px;
        max-width: 110px;
        padding: 8px 24px 7px 2px;    
    }
     
}

.date-picker {
    
    .btn-multiselect {
        margin-top: 22px;
    } 
    
}

.search-release {
    float: left;
    width: 100%;
}

#mapit {
    margin-top: 25px;
}