body {
    padding-top: 0px;
    font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}



header .wrapper-content {
    width: 980px;
    background-color: #fff;
    margin: 0px auto;
}


.wrapper-content {
    width: 98%;
    padding: 0px 120px;
    margin: 0px auto;
}

footer {
    margin-top: 20px;
    margin-bottom: 50px;
}


.navbar-brand {
    padding-top: 10px;
    padding-bottom: 5px;
}

.navbar-brand-image {
    height: 32px;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
}

.starter-template {
    padding: 15px 15px;
    text-align: center;
}

.navbar-inverse .navbar-brand {
    font-size: 16px;
    color: #fff;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
}

.jumbotron {
    margin-top: 30px;
    background: url('../images/map-gray.png') no-repeat left center;
}


.float-right {
    float: right;
}

.float-left {
    float: left;
}

.fg-small {
    font-size: 10px;
}


.divider {
    content: "|";
    padding: 15px 0;
    line-height: 15px;
    width: 1px !important;
    border-left: 1px #ccc solid;
    opacity: .3;
    position: relative;
}

/*================================= Map Main Page ==================================*/


.padding10 {
    padding: 10px;
}

.bg-MenuBlue
{
      background-color: #0f2940 !important;
}

.bg-CharmBlue
{
      background-color: #273c51 !important;
}

.bg-metroWindowSilver {
    background-color: #f4f3f0 !important;
}

.bg-metroCountyBlue {
    BACKGROUND-COLOR: #304054 !important;
}

.bg-metroBlue {
    BACKGROUND-COLOR: #00b0df !important;
}

.bg-metroOrange {
    BACKGROUND-COLOR: #ea6323 !important;
}

.bg-metroRed {
    BACKGROUND-COLOR: #bd203d !important;
}

.bg-DpwOrange {
    background-color: #FFA500 !important;
}

.bg-metroDarkBlue {
    BACKGROUND-COLOR: #024788 !important;
}

.bg-metroPurple {
    BACKGROUND-COLOR: #5e38ba !important;
}

.bg-metroGreen {
    BACKGROUND-COLOR: #67c112 !important;
}


.bg-black {
    background-color: #000000 !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-lime {
    background-color: #a4c400 !important;
}

.bg-green {
    background-color: #60a917 !important;
}

.bg-emerald {
    background-color: #008a00 !important;
}

.bg-teal {
    background-color: #00aba9 !important;
}

.bg-cyan {
    background-color: #1ba1e2 !important;
}

.bg-cobalt {
    background-color: #0050ef !important;
}

.bg-indigo {
    background-color: #6a00ff !important;
}

.bg-violet {
    background-color: #aa00ff !important;
}

.bg-pink {
    background-color: #dc4fad !important;
}

.bg-magenta {
    background-color: #d80073 !important;
}

.bg-crimson {
    background-color: #a20025 !important;
}

.bg-red {
    background-color: #e51400 !important;
}

.bg-orange {
    background-color: #fa6800 !important;
}

.bg-amber {
    background-color: #f0a30a !important;
}

.bg-yellow {
    background-color: #e3c800 !important;
}

.bg-brown {
    background-color: #825a2c !important;
}

.bg-olive {
    background-color: #6d8764 !important;
}

.bg-steel {
    background-color: #647687 !important;
}

.bg-mauve {
    background-color: #76608a !important;
}

.bg-taupe {
    background-color: #87794e !important;
}

.bg-gray {
    background-color: #555555 !important;
}

.bg-dark {
    background-color: #333333 !important;
}

.bg-darker {
    background-color: #222222 !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.bg-darkBrown {
    background-color: #63362f !important;
}

.bg-darkCrimson {
    background-color: #640024 !important;
}

.bg-darkMagenta {
    background-color: #81003c !important;
}

.bg-darkIndigo {
    background-color: #4b0096 !important;
}

.bg-darkCyan {
    background-color: #1b6eae !important;
}

.bg-darkCobalt {
    background-color: #00356a !important;
}

.bg-darkTeal {
    background-color: #004050 !important;
}

.bg-darkEmerald {
    background-color: #003e00 !important;
}

.bg-darkGreen {
    background-color: #128023 !important;
}

.bg-darkOrange {
    background-color: #bf5a15 !important;
}

.bg-darkRed {
    background-color: #9a1616 !important;
}

.bg-darkPink {
    background-color: #9a165a !important;
}

.bg-darkViolet {
    background-color: #57169a !important;
}

.bg-darkBlue {
    background-color: #16499a !important;
}

.bg-lightBlue {
    background-color: #4390df !important;
}

.bg-lightRed {
    background-color: #ff2d19 !important;
}

.bg-lightGreen {
    background-color: #7ad61d !important;
}

.bg-lighterBlue {
    background-color: #00ccff !important;
}

.bg-lightTeal {
    background-color: #45fffd !important;
}

.bg-lightOlive {
    background-color: #78aa1c !important;
}

.bg-lightOrange {
    background-color: #c29008 !important;
}

.bg-lightPink {
    background-color: #f472d0 !important;
}

.bg-grayDark {
    background-color: #333333 !important;
}

.bg-grayDarker {
    background-color: #222222 !important;
}

.bg-grayLight {
    background-color: #999999 !important;
}

.bg-grayLighter {
    background-color: #eeeeee !important;
}

.bg-blue {
    background-color: #00aff0 !important;
} 



.fg-menuBlue {
    color: #0f2940 !important;
}

.fg-gray {
    color: #333 !important;
}

.fg-Orange {
    color: #FFA500 !important;
}

.fg-OrangeIOS7 {
    color: #FF9500 !important;
}


.fg-black {
    color: #000000 !important;
}

.fg-white {
    color: #ffffff !important;
}

.fg-lime {
    color: #a4c400 !important;
}

.fg-green {
    color: #60a917 !important;
}

.fg-emerald {
    color: #008a00 !important;
}

.fg-teal {
    color: #00aba9 !important;
}

.fg-cyan {
    color: #1ba1e2 !important;
}

.fg-cobalt {
    color: #0050ef !important;
}

.fg-indigo {
    color: #6a00ff !important;
}

.fg-violet {
    color: #aa00ff !important;
}

.fg-pink {
    color: #dc4fad !important;
}

.fg-magenta {
    color: #d80073 !important;
}

.fg-crimson {
    color: #a20025 !important;
}

.fg-red {
    color: #e51400 !important;
}

.fg-orange {
    color: #fa6800 !important;
}

.fg-amber {
    color: #f0a30a !important;
}

.fg-yellow {
    color: #e3c800 !important;
}

.fg-brown {
    color: #825a2c !important;
}

.fg-olive {
    color: #6d8764 !important;
}

.fg-steel {
    color: #647687 !important;
}

.fg-mauve {
    color: #76608a !important;
}

.fg-taupe {
    color: #87794e !important;
}

.fg-gray {
    color: #555555 !important;
}

.fg-dark {
    color: #333333 !important;
}

.fg-darker {
    color: #222222 !important;
}

.fg-transparent {
    color: transparent !important;
}

.fg-darkBrown {
    color: #63362f !important;
}

.fg-darkCrimson {
    color: #640024 !important;
}

.fg-darkMagenta {
    color: #81003c !important;
}

.fg-darkIndigo {
    color: #4b0096 !important;
}

.fg-darkCyan {
    color: #1b6eae !important;
}

.fg-darkCobalt {
    color: #00356a !important;
}

.fg-darkTeal {
    color: #004050 !important;
}

.fg-darkEmerald {
    color: #003e00 !important;
}

.fg-darkGreen {
    color: #128023 !important;
}

.fg-darkOrange {
    color: #bf5a15 !important;
}

.fg-darkRed {
    color: #9a1616 !important;
}

.fg-darkPink {
    color: #9a165a !important;
}

.fg-darkViolet {
    color: #57169a !important;
}

.fg-darkBlue {
    color: #16499a !important;
}

.fg-lightBlue {
    color: #4390df !important;
}

.fg-lighterBlue {
    color: #00ccff !important;
}

.fg-lightTeal {
    color: #45fffd !important;
}

.fg-lightOlive {
    color: #78aa1c !important;
}

.fg-lightOrange {
    color: #c29008 !important;
}

.fg-lightPink {
    color: #f472d0 !important;
}

.fg-lightRed {
    color: #ff2d19 !important;
}

.fg-lightGreen {
    color: #7ad61d !important;
}

.fg-grayDark {
    color: #333333 !important;
}

.fg-grayDarker {
    color: #222222 !important;
}

.fg-grayLight {
    color: #999999 !important;
}

.fg-grayLighter {
    color: #eeeeee !important;
}

.fg-blue {
    color: #00aff0 !important;
}

.fg-bold {
    font-weight: bold;
}

.fg-alignRight {
    text-align: right;
}

fg-bold {
    font-weight: bold;
}

#tbl_Noti {
    width: 100%;
    border: 1px solid #333;
    margin-top: 20px;
}

    #tbl_Noti tr th {
        text-align: left;
        background-color: #333;
        color: white;
    }

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.center {
    text-align: center;
}


.border {
    border: 1px solid #d9d9d9;
}

.display-none {
    display: none;
}

.GoogleMarkerWithLabel{
    font-size:small;
    color:black;
    font-weight:800;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    background-color:transparent;
    padding:2px;
    padding-left:17px;
    border: 0px solid white;

}

.GoogleMarkerWithLabelUnder{
    font-size:small;
    color:black;
    padding-top:10px;
    padding-right:100px;
}


.MapLoaderDim
{
    background-color: #e9e9e9;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

.rainFallDurationDiv{ 
    position:fixed; 
    top:15%; 
    left:1%; 
    z-index:1001; 
    background-color:white; 
    padding:5px 5px 20px 10px;
    border-radius:5px;
    border: 1px solid black;
}

#RainFallAnimationMenu	{ 
    position:fixed; 
    bottom:10%; left:2%; 
    z-index:1001; 
    background-color:#091926; 
    color:white;
    padding:5px 5px 20px 10px;
    border-radius:5px;
    border: 1px solid lightgrey;
    
}

#RainFallAnimationMenu	a{ 
    color:white;
}

#RainFallAnimationMenu	a:hover{ 
 
    background-color:yellow;
    color:black;
    border-radius:2px;
    padding:5px;
    
}

.MapTitle_fixBottomLeft	{ 
    position:fixed; 
    text-align:center;
    bottom:6%; left:2%;
    z-index:1001; 
    background-color:red; 
    padding: 0px 10px 10px;
    border-radius:5px;
    opacity: .8;
}

.rainFallDurationDiv a{
   
}
.rainFallDurationDiv a:active{
    background-color:red;
}


dd label{
    font-weight:normal;
}
    


/*==================================== Respsonsive Design ======================================*/


#MainPageTitle, #PanelMap, #PanelGrid, #ColapseMainPageTitle, #ColapsePanelMap, #ColapsePanelGrid, #HrMainPageTitle, #HrPanelMap, #HrPanelGrid {
    display: none;
}

.icon-mapKey {
    width: 20px;
}


@media all and (max-width: 980px) {
    header .wrapper-content {
        width: 100%;
        height: auto;
    }

    .wrapper-content {
        width: 100%;
    }

    #module-right-content {
        text-align: left;
    }

    #module-content {
        width: 100%;
    }

    #MainPageTitle, #PanelMap, #PanelGrid, #ColapseMainPageTitle, #ColapsePanelMap, #ColapsePanelGrid, #HrMainPageTitle, #HrPanelMap, #HrPanelGrid {
        display: block;
    }

    #HrFullWidthOnly {
        display: none;
    }

    .icon-traffic-light {
        width: 100%;
    }
}


@media (max-width: 767px) {
    footer:last-child {
        height: 0px;
        background-color: white;
        margin-top: 0px;
    }
}


    .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('http://dpw.lacounty.gov/GIS/GISMAPS/Content/Images/Map/Loading_Gear.gif') 50% 50% no-repeat rgb(249,249,249);
            background-color:#2a2a2a;
        }

     .loader_StreetView {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('http://dpw.lacounty.gov/GIS/GISMAPS/Content/Images/Map/Loading_Pin.gif') 50% 50% no-repeat rgb(248,248,255);
            background-color:white;
        }


.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 150px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height:0px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px transparent;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius:5px;
background: white; 
box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

   html, body, #map {
        height: 100%;
        width:100%;
        padding: 0;
        margin: 0;
    }

    a {
        color: blue;
    }

        a:visited {
            color: purple;
        }

    .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
        display: none !important;
    }