.map, .map-bar {
    position: relative;
    display: block;
    cursor: pointer;
}

.map-bar {
    text-align: left;
}

    .map-bar * {
        box-sizing: border-box
    }

.map {
    width: 100%;
    /*max-width: 830px;*/
    height: 830px;
    padding: 5px;
    margin: 0 auto;
    border: 2px solid #005776;
    border-top: none;
}

#provinceInfo {
    /*width: 210px;*/
    position: absolute;
    top: 20%;
    right: 15px;
    border: 1px solid #005776;
    background-color: #fff;
    padding: 15px 0px;
    max-width: 100%;
    text-align: left;
    display: none;
    border-radius: 20px;
    /*border-bottom-left-radius: 0;*/
}

    #provinceInfo h4,
    #provinceInfo p {
        padding: 0 15px;
        align-content: center;
    }

    #provinceInfo h4 {
        font-size: 22px;
        margin: 0;
        color: #005776;
        border-right: 1px solid #005776;
        padding-left: 20px;
    }

        #provinceInfo h4 span {
            font-size: 15px;
        }

    #provinceInfo a {
        text-decoration: none;
        background: none;
    }

    #provinceInfo p {
        font-size: 17px;
        padding-right: 20px;
        margin: 0;
    }

    #provinceInfo.show {
        display: flex;
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
    }

#CAMS, #NAMS {
    width: 100%;
    max-width: 100%;
    height: 100%;
    -webkit-transition: .3s;
    transition: .3s;
    margin: 0 auto !important
}

    #NAMS .mid_atlantic {
        fill: rgb(158,83,48);
    }

    #CAMS .canada_central {
        fill: rgb(0, 156, 222);
    }

    #NAMS .mid_south {
        fill: rgb(0,156,222);
    }

    #CAMS .southeast, #NAMS .southeast {
        fill: rgb(0,87,184);
    }

    #NAMS .central_canada {
        fill: rgb(0,133,155);
    }

    #CAMS .south_texas, #NAMS .south_texas {
        fill: rgb(0,47,108);
    }

    #NAMS .mountain,
    #CAMS .west {
        fill: rgb(158,83,48);
    }

    #CAMS .mid_atlantic,
    #NAMS .great_lakes {
        fill: rgb(49,155,66);
    }

    #CAMS .northeast, #NAMS .northeast {
        fill: rgb(0,47,108);
    }

    .midwest {
        fill: rgb(0,122,62);
    }

    #CAMS .north_central, #NAMS .north_central, .northern_california {
        fill: rgb(213,120,0);
    }

    .upper_midwest {
        fill: rgb(255,163,0);
    }

    #CAMS .south_central, #NAMS .south_central {
        fill: rgb(132,189,0);
    }

    #CAMS .canada_east, #NAMS .eastern_canada {
        fill: rgb(0,193,213);
        }

    #CAMS .canada_west {
        fill: rgb(0,133,155);
    }

    .pacific_northwest {
        fill: rgb(0,87,118);
    }

    .mexico {
        fill: rgb(0,122,62);
    }

    #CAMS .callout-box,
    #NAMS .callout-box {
        fill: white;
        stroke: #000000;
        stroke-miterlimit: 10
    }

    .mid_south,
    .missouri {
        fill: rgb(158,83,48);
    }

    #CAMS .new-jersey, #CAMS .unmarked {
        fill: #CACBCB
    }

    #CAMS .mountain {
        fill: #4E4E4E
    }

    #CAMS .hover:hover,
    #NAMS .hover:hover {
        opacity: 1.0;
        cursor: pointer;
    }

.active, .active:hover {
    fill: #56b1a7 !important;
}

@media all and (max-width:1250px) {
    .map {
        height: 800px
    }
}

@media all and (max-width:1200px) {
    .map {
        height: 770px
    }
}

@media all and (max-width:1150px) {
    .map {
        height: 730px
    }
}

@media all and (max-width:1100px) {
    .map {
        height: 700px
    }
}

@media all and (max-width:1050px) {
    .map {
        height: 670px
    }
}

@media all and (max-width:1000px) {
    .map {
        height: 640px
    }
}

@media all and (max-width:960px) {
    .map {
        height: 600px
    }

    #provinceInfo {
        padding: 10px 15px;
        width: 200px
    }

        #provinceInfo h4 {
            font-size: 17px;
            line-height: 21px
        }

        #provinceInfo p {
            font-size: 15px;
            line-height: 21px
        }
}

@media all and (max-width:900px) {
    .map {
        height: 560px
    }
}

@media all and (max-width:850px) {
    .map {
        height: 520px
    }
}

@media all and (max-width:800px) {
    .map {
        height: 500px
    }
}

@media all and (max-width:770px) {
    .map {
        height: 480px
    }
}

@media all and (max-width:760px) {
    #provinceInfo {
        width: 99%;
        padding-top: 15px;
        padding-bottom: 15px;
        position: relative;
        bottom: auto;
        right: auto;
        text-align: center;
        margin: 0 auto
    }

    .map {
        height: auto
    }

    #provinceInfo h4 {
        font-size: 18px;
        line-height: 28px
    }

    #provinceInfo p {
        font-size: 17px;
        line-height: 27px
    }
}

.rep-map {
    border-bottom: none;
}

.rep-map-controls {
    background-color: #005776;
    color: #fff;
    padding: 15px 30px;
    display: block;
    clear: both;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.rep-map-controls-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: end;
    position: relative
}

#locatorMapPanelSearch {
    border: 1px solid white;
    width: 345px;
    border-radius: 10px;
}

#locatorMapPanelSearchText {
    padding: 8px;
    width: 280px;
    display: inline-block;
    font-size: 14px;
    background-color: transparent;
    color: #fff;
    position: relative;
}

    #locatorMapPanelSearchText::placeholder {
        color: #bbbbbb;
    }

#locatorMapPanelSearchButton,
#locatorMapPanelLocationButton {
    background-color: transparent;
    color: #fff;
    position: absolute;
    cursor: pointer;
}

#locatorMapPanelSearchButton {
    top: 7px;
    right: 8px;
}

#locatorMapPanelLocationButton {
    top: 5px;
    right: 36px;
}

    #locatorMapPanelSearchButton, #locatorMapPanelSearchButton img,
    #locatorMapPanelLocationButton, #locatorMapPanelLocationButton img {
        border: 0;
        margin: 0;
        padding: 0;
        display: block;
    }

        #locatorMapPanelSearchButton img {
            width: 22px;
            height: 19px;
        }

        #locatorMapPanelLocationButton img {
            width: 22px;
            height: 22px;
        }

            #locatorMapPanelLocationButton img.inactive {display:none;}

            .data-loader {
                width: 22px;
                height: 22px;
                border: 1px solid;
                border-color: #ffffff transparent;
                border-radius: 50%;
                display: none;
                animation: none;
            }

    .data-loader.active {
        display: inline-block;
        animation: rotation 1s linear infinite;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.map-object > g {
    transition: .15s;
    fill-opacity: 1.0;
}

    .map-object > g:hover,
    .map-object > g.active {
        fill-opacity: 0.6;
    }

.map-object > g > path {
    stroke: transparent;
    stroke-width: 10px;
}