body {
    padding-top: 0px;
    font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    background-color: #091926 !important;
}



header .wrapper-content {
    width: 980px;
    background-color: #fff;
    margin: 0px auto;
}


.wrapper-content {
    width: 98%;
    padding: 20px 120px;
    margin: 0px auto;
}


.wrapper-content-white {
    width: 100%;
    background-color:white;
    padding: 0px 120px;
    margin: 0px auto;
}


footer {
    margin-top: 20px;
    margin-bottom: 50px;
}

.linktextblack {
    color: black !important;
}
.linktext:hover {
    color: #77f !important;
}


.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-green-lite {
    background-color: #2EC99A !important;
}

.bg-DarkBlack {
    background-color: #091926 !important;
}

.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-ios-blue {
    background-color: #1AD6FD !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-pwBlue {
    background-color: #005385 !important;
}

.bg-pwGold {
    background-color: #f6a61c !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;
}

.bg-blackTransparent {

    background-color: #091926 !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.1; /* Safari, Opera */
    -moz-opacity:0.10; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

.MapDim {
    background-color: #999999;
    filter: alpha(opacity=80); /* IE */
    opacity: .34; /* Safari, Opera */
    -moz-opacity: 0.10; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
}

.v-middle {
    display: inline-block;
    vertical-align: middle
}

.fixElement	{ 
    position:fixed; 
    top:10%; right:2%; 
    z-index:1001; 
    background-color:white; 
    padding:5px 5px 20px 10px;
    border-radius:5px;
    border: 1px solid lightgrey;
    
}

#Map-TopLeftMenu {
    position: fixed;
    top: 14%;
    left: 3%;
    z-index: 1001;
    background-color: #091926;
    color: white;
    border-radius: 5px;
    border: 1px solid black;
    opacity: .8;
    text-align: center;
    vertical-align: middle;
    padding: 25px;
    font-size:medium;
    width:300px;

    
}

#Map-BottomLeftMenu 
{

    position: fixed;
    bottom: 5%;
    left: 2%;
    z-index: 1001;
    background-color: #091926;
    color: white;
    border-radius: 5px;
    border: 1px solid black;
    opacity: .8;
    text-align: left !important;
    vertical-align: middle;
    padding: 25px;
    font-size: larger;
}



#Map-Tour {
    position: fixed;
    top: 60%;
    left: 50%;
    z-index: 1001;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    border: 0px solid black;
    opacity: .8;
    text-align: center;
    vertical-align: middle;
    padding: 25px;
    font-size: larger;
}


#RainFallAnimationMenu	{ 
    position:fixed; 
    bottom:10%; left:3%; 
    z-index:1001; 
    background-color:#091926; 
    color:white;
    border-radius:5px;
    border: 1px solid black;
    opacity:.8;
    text-align:center;
    vertical-align:middle;
    padding:25px;
    font-size:larger;
    
}

#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;
}

.fixElement a{
   
}
.fixElement 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;
}







    .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('https://pw.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('https://pw.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 {

    height: 100%;
    width:100%;
    padding: 0;
    margin: 0;
}

#map {
    height: 91%;
    width: 100%;
}

a {
    color: blue;
    text-decoration: underline;
}

        a:visited {
            color: purple;
        }

    .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
        display: none !important;
    }

dl dt {
    font-weight: bold;
    font-size: .9em;
    text-transform: uppercase;
}


dl dd label{
    margin-bottom:0px;
}

.leaflet-popup-content {
    width: 350px !important;
}

    .leaflet-popup-content h2 {
        font-size: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }


.map-icon {
    width: 100px;
    height: 100px;
}

span.indicator {
    position: relative;
    border: 0px solid white;
    background: #8a8a8a;
    color: #ffffff;
    font-size: .85em;
    font-weight: 400;
    padding: 10px;
    margin: 2px;
    width: 100%;
    vertical-align: middle;
    overflow: visible;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}


.padding-top-10{
    padding-top:11px;
}


.modal-dialog {
    width: 90%;
    margin: 30px auto;
}

#pano, #map-Street, #details {
    float: left;
    height: 100%;
    width: 100%;
}


/*================================= Tile ===============================*/
.metro-title {
    font-weight: lighter;
    font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}

.tile {
    margin: 30px 0px;
    background-color: transparent;
    width:100%;
}

    .tile:not(.no-hover):hover {
        outline: 0px #43cc00 solid;
        background-color: purple !important;
        cursor: pointer;
        color: black !important;
    }

div.min-height-small {
    height: 150px;
}

div.min-height-medium {
    height: 255px;
}

.tile-img-container {
    text-align: center;
    height: 100px;
}

    .tile-img-container > i {
        position: relative;
        top: calc(40% - 10px); /* 50% - 3/4 of icon height */
    }

    .tile-img-container p {
        margin: 10px;
        color: white;
        font-family: Tahoma;
        font-size: large;
    }