body > div.container {
    box-shadow: inset 0px 200px 0 0 black;
}

.breadcrumb {
    position: relative;
    z-index: 99;
}

.breadcrumbs {
    margin-bottom: -47px;
}

.breadcrumb a {
    color: #dadada;
}

#familyID, #idtip, .familyHeader {
    color: #ffffff;
}

#familyID {
    text-shadow: 3px 2px 10px #000000;
}

.familyHeader {
    margin-top: 47px !important;
}

#laserGoggleBullets {
    margin-bottom: 25px;
    color: #ffffff;
    position: relative;
    z-index: 9;
}

@media (max-width: 1199px) {
    #laserGoggleBullets {
        color: #000;
    }
}

.fw-header {
    padding-right: 0px;
    background-image: url(https://www.edmundoptics.com/media/baek5oj0/laser-gogglesv4.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    height: 200px;
    background-color: #000;
    top: -1px;
    position: relative;
}


    .fade.in {
        opacity: 1;
    }

    #FamilyBody {
        margin-top: -207px;
        position: relative;
    }

        #FamilyBody h1 {
            padding-left: 0px !important;
            position: relative;
            z-index: 9
        }

    .familyid {
        margin-top: -23px;
        top: 34px;
        position: relative;
        z-index: 99
    }

    @media (max-width: 1199px) {
        .fw-header {
            background-image: none !important;
            background-color: transparent !important;
        }

        #familyID, #idtip, .familyHeader, .breadcrumbs a {
            color: #000000 !important;
        }

        body > div.container {
            box-shadow: none;
        }

        .familyHeader {
            margin-top: 40px !important;
        }

        #FamilyBody > div:nth-child(2) > ul {
            margin-top: 0px;
            margin-bottom: 0px;
            color: #000000;
        }

        #FamilyBody {
            margin-top: -188px;
        }

        #familyID {
            text-shadow: none;
        }

        .familyid {
            margin-top: 37px !important;
        }

        .breadcrumbs {
            margin-left: -15px;
        }
    }
    /* Disclaimer section */
    #chart-disclaimer {
        background-color: #fdf5d9 !important;
        background-image: none !important;
        padding: 20px !important;
        border: none !important;
        border-radius: 0px !important;
    }
    /* Chart legend section */
    #chart-legend {
        padding-bottom: 5px;
        border-bottom: solid 1px #dadada;
    }

    #custom-legend {
        text-align: center;
    }

    .legend-block {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: solid 1px black;
    }

    .legend-lbl {
        font: 14px heebo,Helvetica,Arial,sans-serif;
        font-weight: normal !important;
        padding-left: 4px;
    }

    .legend-info {
        background-color: #31b0d5 !important;
    }

    .legend-zoom {
        background-color: green !important;
    }

    .legend-refresh {
        background-color: #0462be !important;
    }
    /* Chart section */
    #chart-data {
        margin-top: 30px !important;
    }
    /* Chart filter section */
    .chart-filter-row {
        background-color: #dce9fd;
        padding: 20px !important;
        margin-top: 15px;
    }

    #lblSelectedChartFilter {
        margin-right: 10px !important;
    }

    .chart-filter-labels {
        font-size: 14px !important;
    }

    .chart-filter-button {
        color: #fff;
        background-color: #0462be;
        padding: 5px;
        font-size: 10px !important;
        text-transform: uppercase;
    }

        .chart-filter-button:hover {
            cursor: pointer;
            background-color: #0462be !important;
        }

        .chart-filter-button:focus {
            cursor: pointer;
            background-color: #0462be !important;
        }
    /* Add pointer to chart bars */
    svg {
        cursor: default;
    }

        svg > g g g {
            cursor: pointer;
        }
    /* Popup container */
    .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
        /* The actual popup (appears on top) */
        .popup .popuptext {
            visibility: hidden;
            width: 400px;
            background-color: #555;
            color: #fff;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            left: 110%;
            top: -45%;
            white-space: pre-wrap;
        }
        /* Toggle this class when clicking on the popup container (hide and show the popup) */
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }


    @media (max-width: 1199px) {
        #FamilyBody {
            margin-top: -70px
        }

        .breadcrumbs {
            padding-top: 10px;
            color: #000;
        }

            .breadcrumbs a {
                color: #000 !important;
            }

        #familyID {
            text-shadow: none !important;
        }

        .popup .popuptext {
            width: 320px !Important;
        }

        #chart-legend-image {
            margin-top: 0px !important;
        }
    }