#nri-layers .popover {
    min-width: 200px;
}

#nri-layers .dropdown-menu {
    padding-bottom: 0px;
}

.nri-layer-selector-container {
    display: flex;
    height: 50px;
    width: 100%;
    vertical-align: middle;
    background-color: #303030;
    z-index: 1000;
}

.nri-notification-banner {
    display: none;
    justify-content: center;
    align-items: center;
    color: white !important;
    margin-left: 1em;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 100;
    padding-right: 5em;
}

.nri-notification-banner-link {
    font-weight: 100;
    color: white !important;
}

.nri-notification-banner-link:hover {
    font-weight: 100;
}

.nri-notification-banner-link:focus {
    font-weight: 100;
}

.map-help {
    float: right;
    display: inline-flex;
    vertical-align: top;
    justify-content: flex-end;
    align-items: baseline;
    color: white;
    /*margin-right: 5px;*/
    /*margin-right: 31px;*/
    /*text-align: center;*/
    line-height: 45px;
    height: 50px;
    cursor: pointer;
    padding-right: 10px;
}

    .map-help *:not(i) {
        text-decoration: underline;
    }
    .map-help i {
        margin-right: 10px;
    }
    .layer-selector.layer-panel {
        /*display: flex;*/
        display: inline-block;
        padding-left: 10px;
        position: relative;
        top: 0;
        width: calc(100% - 50px);
        height: 50px;
        line-height: 45px;

        /*min-width: 256px;*/
    }

        .layer-selector.layer-panel > :not(:first-child) {
            margin-left: 5px;
        }

        .layer-selector.layer-dropdown-container .btn:first-child {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right: none;
        }

.layer-selector.layer-dropdown-container {
    font-size: 15px;
    line-height: 25px;
    border-width: 1.5px;
    left: 0px;
}

    .layer-selector.layer-dropdown-container .btn {
        border-color: inherit;
    }

    .layer-selector.layer-dropdown-container .dropdown-outer {
        top: 33px;
        /*Would need to change dropdown open animation event to support natural content's width rather than hard-coded width*/
        /*min-width: 200px;
        max-width: 400px;*/
        width: 250px;
        padding-top: 0px;
        border-top: none;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }

        .layer-selector.layer-dropdown-container .dropdown-outer .dropdown-inner {
            height: 100%;
            border-color: inherit;
        }

/*TODO layer dropdown link styles*/
.layer-selector.layer-dropdown-container .dropdown-outer .dropdown-inner a {
    text-decoration: none;
    
}

.layer-selector.layer-dropdown-container .dropdown-outer .dropdown-inner a:not(.btn-layer-selected) {
    cursor: pointer;
}

.layer-selector.layer-dropdown-container .dropdown-menu .layer-selector {
    display: block;
    padding: 2px 5px;
}
    .layer-selector.layer-dropdown-container .dropdown-menu .layer-selector.layer-link:not(.dropdown-selected):hover {
        font-weight: bold;
        /*background-color: rgba(195, 222, 251, .5);*/
    }

    .layer-selector.layer-dropdown-container .dropdown-menu .dropdown-selected {
        background-color: rgba(195, 222, 251, .8);
        font-weight: bold;
    }

.layer-selector.btn, .layer-selector .btn {
    background-color: transparent;
}

.layer-selector:hover {
    /*Color text black on hover by default*/
    color: #333;
}

.btn.btn-layer-selected {
    /*Override default color text with white color*/
    color: black;
}

#layer-RiskIndex-container {
    color: #ff8a8e;
    border-color: #ff8a8e;
}

    #layer-RiskIndex-container .btn:hover, #layer-RiskIndex-container .btn:focus, #layer-RiskIndex-container .btn.btn-layer-selected {
        background-color: #ff8a8e;
    }

    #layer-RiskIndex-container.layer-selector.layer-dropdown-container .dropdown-outer {
        border-left-color: #ff8a8e;
        border-right-color: #ff8a8e;
        border-bottom-color: #ff8a8e;
    }

#layer-ExpectedAnnualLoss-container {
    color: #e7a369;
    border-color: #e7a369;
}

    #layer-ExpectedAnnualLoss-container .btn:hover, #layer-ExpectedAnnualLoss-container .btn:focus, #layer-ExpectedAnnualLoss-container .btn.btn-layer-selected {
        background-color: #e7a369;
    }

    #layer-ExpectedAnnualLoss-container.layer-selector.layer-dropdown-container .dropdown-outer {
        border-left-color: #e7a369;
        border-right-color: #e7a369;
        border-bottom-color: #e7a369;
    }

/*either use ID selectors AND override #{id} .btn:focus { color: #333; }*/
/*or just use class ID selectors, and make the best of a over simplified overrides system*/
.layer-selector.layer-SocialVulnerability {
    border-color: #aadd67;
}
.layer-selector.layer-SocialVulnerability:not(:hover):not(:focus):not(.btn-layer-selected) {
    color: #aadd67;
}

    .layer-selector.layer-SocialVulnerability:hover, .layer-selector.layer-SocialVulnerability:focus, .layer-selector.layer-SocialVulnerability.btn-layer-selected {
        background-color: #aadd67;
    }

.layer-selector.layer-CommunityResilience {
    border-color: #9E73B4;
    border-color: #d892fc;
}
.layer-selector.layer-CommunityResilience:not(:hover):not(:focus):not(.btn-layer-selected) {
    color: #9E73B4;
    color: #d892fc;
}

    .layer-selector.layer-CommunityResilience:hover, .layer-selector.layer-CommunityResilience:focus, .layer-selector.layer-CommunityResilience.btn-layer-selected {
        background-color: #9E73B4;
    background-color: #d892fc;
    }

.layer-selector.layer-FutureRiskButton {
    border-color: #ffffff;
    border-color: #ffffff;
}
.layer-selector.layer-FutureRiskButton:not(:hover):not(:focus):not(.btn-layer-selected) {
    color: #ffffff;
    color: #ffffff;
}
    
.layer-selector.layer-FutureRiskButton:hover, .layer-selector.layer-FutureRiskButton:focus, .layer-selector.layer-FutureRiskButton.btn-layer-selected {
    background-color: #ffffff;
    background-color: #ffffff;
}