/*
  Data Exploration Project
  Author: Ashwin Agarwal  
  Date created: 26-May-21
  Last update: 5-Jun-21
*/

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}


/*
 * Base structure
 */

#home,
#by-region,
#by-engagement,
#by-channel {
    padding-top: 84px;
    height: 100vh;
}

#home,
#by-region,
#by-engagement,
#by-channel,
#references {
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
    color: #fff;
}

#by-region,
#by-channel {
    background-color: #1A1A1D;
}

#by-engagement,
#references {
    background-color: #19181A;
}

#home .intro {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

#home .footer {
    position: absolute;
    bottom: 30px;
}


/*
 * Header
 */

header {
    opacity: 0.85;
    border-bottom: 1px solid black;
    height: 85px;
}

header h3 {
    color: black;
}

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    background-color: transparent;
    border-bottom: .25rem solid transparent;
    color: black;
}

.nav-masthead .nav-link:not(.active):hover,
.nav-masthead .nav-link:not(.active):focus {
    color: #FF0000;
}

.nav-masthead .nav-link.active:hover,
.nav-masthead .nav-link.active:focus {
    color: #FF0000;
}

.nav-masthead .nav-link+.nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    border-bottom-color: #FF0000;
    color: #FF0000;
}


/* Custom default button */

.btn-learn-more {
    color: #333;
    text-shadow: none;
}

.btn-learn-more:hover {
    color: #FF0000 !important;
}

.bg-custom {
    /* image taken from wallpapersafari.com */
    background: url(../images/SX4JNp.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

a:hover {
    color: #FF0000;
}

.faded {
    opacity: 0.1 !important;
}

.highlight {
    opacity: 1 !important;
}


/* Visualization customizations */

#bubble_map,
#doughnut,
#wordcloud,
#bubble_plot,
#stacked_barchart,
#circular_barplot,
#line_chart {
    /* hide visualizations div until they are ready */
    display: none;
}

#by-region path,
#by-channel path {
    opacity: 0.7;
}

#stacked_barchart rect,
#by-engagement circle {
    opacity: 0.7;
    stroke: white;
}

#by-region path:hover,
#by-region path.hovered,
#stacked_barchart rect:hover,
#bubble_plot circle:hover,
#bubble_plot circle.hovered,
#circular_barplot path:hover,
#circular_barplot path.hovered {
    stroke: black;
    opacity: 1;
    cursor: pointer;
}

#circular_barplot .highlight:not(text) {
    stroke-width: 4;
    stroke: black;
    cursor: pointer;
}

#circular_barplot .highlight {
    opacity: 1;
}

#stacked_barchart rect:hover {
    cursor: default;
}

#bubble_map circle {
    opacity: 1;
    stroke: white;
}

#bubble_map circle:hover,
#bubble_map circle.hovered {
    opacity: 0.7;
    stroke: black;
    cursor: pointer;
}

#bubble_map text.hovered,
#bubble_map text:hover,
#circular_barplot text:hover,
#circular_barplot text.hovered {
    text-decoration: underline;
    cursor: default;
}

.tooltip {
    width: 200px;
    border: solid;
    border-width: 2px;
    border-radius: 5px;
    padding: 5px;
}

#doughnut path:hover {
    stroke: black;
    stroke-width: 2px;
    opacity: 1;
    cursor: default;
}

#doughnut text:not(.doughnut_center) {
    font-size: 12px;
    cursor: default;
}

polyline {
    stroke: #fff;
    fill: none;
    stroke-width: 1;
}

text.doughnut_center {
    font-size: 1.3em;
    fill: #fff;
    text-anchor: middle;
    cursor: default;
}

#wordcloud text {
    opacity: 0.8;
}

#wordcloud text:hover,
#wordcloud text.hovered,
#bubble_plot text:hover.legend,
#bubble_plot text.hovered {
    opacity: 1;
    text-decoration: underline;
    cursor: default;
}

#line_chart path:hover {
    opacity: 1;
    cursor: default;
    stroke-width: 3;
}

#by-engagement line,
#by-engagement path,
#line_chart .domain {
    stroke: rgb(180, 180, 180);
    stroke-width: 3.5px;
}

#circular_barplot path {
    stroke: #fff;
    stroke-opacity: 0.7;
    stroke-width: 0.1rem;
}

#by-engagement text,
#line_chart text {
    fill: rgb(180, 180, 180);
    font-size: 16px;
}

#bubble_plot text.legend {
    font-size: 1rem;
}

#by-engagement .sort_radio {
    color: rgb(180, 180, 180);
    margin-right: 40px;
    font-size: 0.9em;
}

#by-engagement .country_select {
    color: rgb(180, 180, 180);
    margin-left: 100px;
}

#by-channel text {
    font-weight: 500;
}

#channelN .slider-selection {
    background: #BABABA;
}

.user_interaction {
    color: rgb(180, 180, 180);
}

.user_interaction *,
.sort_radio {
    display: none;
}

.interesting-insights {
    float: right;
    color: #fff;
}

.interesting-insights:hover {
    text-decoration: underline;
    cursor: pointer;
}

.bulb {
    background: url(../images/lightbulb.svg) no-repeat;
    width: 20px;
    height: 20px;
    content: "";
    display: inline;
    float: right;
}

.bulb.hovered,
.bulb:hover {
    background: url(../images/lightbulb-hover.svg) no-repeat;
}