﻿#map {
    width: auto;
    height: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.OldBallonV3 {
    white-space: nowrap;
}

    .OldBallonV3 span {
        height: 34px;
        position: relative;
        vertical-align: top;
        display: inline-block;
        padding-top: 2px;
    }

.icon-highcontrast {
    color: grey !important;
}

.icon-b-t-1 {
    white-space: nowrap;
    color: white;
}

    .icon-b-t-1 span:first-child {
        width: 28px;
        padding-right: 0px;
        font-weight: bold;
        font-size: 120%;
        padding-top: 2px;
        height: 36px; /*?*/
    }

    .icon-b-t-1 span {
        height: 36px; /*?*/
        vertical-align: top;
        display: inline-block;
        padding-top: 4px;
        font-family: arial;
        font-size: 12px;
    }

.icon-b-r-1 {
    white-space: nowrap;
    color: white;
}

    .icon-b-r-1 span:first-child {
        width: 40px;
        padding-left: 11px;
        font-weight: bold;
        font-size: 120%;
        padding-top: 2px;
    }

    .icon-b-r-1 span {
        height: 25px;
        vertical-align: top;
        display: inline-block;
        padding-top: 4px;
        font-family: arial;
        font-size: 12px;
    }


.icon-b-b-1 {
    white-space: nowrap;
    color: white;
}

    .icon-b-b-1 span:last-child {
        width: 28px;
        padding-left: 2px;
        font-weight: bold;
        font-size: 120%;
        padding-top: 15px;
    }

    .icon-b-b-1 span {
        height: 38px;
        vertical-align: top;
        display: inline-block;
        padding-top: 16px;
        font-family: arial;
        font-size: 12px;
    }

.icon-b-l-1 {
    white-space: nowrap;
    color: white;
}

    .icon-b-l-1 span:last-child {
        width: 40px;
        padding-right: 10px;
        font-weight: bold;
        font-size: 120%;
        padding-top: 3px;
    }

    .icon-b-l-1 span {
        height: 25px;
        vertical-align: top;
        display: inline-block;
        padding-top: 4px;
        font-family: arial;
        font-size: 12px;
    }

.icon-b-t-2 {
    white-space: nowrap;
    color: white;
}
    .icon-b-t-2 span:first-child {
        width: 43px;
        font-weight: bold;
    }

    .icon-b-t-2 span {
        height: 53px;
        vertical-align: top;
        display: inline-block;
        padding-top: 7px;
        font-family: helvetica;
        font-size: 18px;
    }

.icon-b-r-2 {
    white-space: nowrap;
    color: white;
}

    .icon-b-r-2 span:first-child {
        width: 63px;
        padding-left: 18px;
        font-weight: bold;
    }

    .icon-b-r-2 span {
        height: 40px;
        vertical-align: top;
        display: inline-block;
        padding-top: 7px;
        font-family: helvetica;
        font-size: 18px;        
    }


.icon-b-b-2 {
    white-space: nowrap;
    color: white;
}

    .icon-b-b-2 span:last-child {
        width: 43px;
        font-weight: bold;
        height: 34px;
    }

    .icon-b-b-2 span {
        height: 53px;
        vertical-align: top;
        display: inline-block;
        padding-top: 26px;
        font-family: helvetica;
        font-size: 18px;
    }

.icon-b-l-2 {
    white-space: nowrap;
    color: white;
}

    .icon-b-l-2 span:last-child {
        width: 63px;
        padding-right: 14px;
        font-weight: bold;
    }

    .icon-b-l-2 span {
        height: 40px;
        vertical-align: top;
        display: inline-block;
        padding-top: 7px;
        font-family: helvetica;
        font-size: 18px;
    }

.iconb-mp0 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
}

.MAPICONtag {
    white-space: nowrap;
}

    .MAPICONtag span {
        height: 22px;
        position: relative;
        vertical-align: top;
        display: inline-block;
        padding-top: 3px;
        color: white;
    }

.svg-12 {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
}
.svg-16 {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
}
.svg-18 {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
}
.svg-20 {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
}
.svg-22 {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
}
.svg-24 {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
}
.svg-26 {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
}
.svg-28 {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
}

.svg-gray {
    filter: invert(.5);
}
.svg-grey {
    filter: invert(.5);
}

.svg-white {
    filter: invert(1);
}

.svg-orange {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(1deg);
}
.svg-lightgreen {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(90deg);
}
.svg-blue {
    filter: invert(.4) sepia(1) saturate(5) hue-rotate(170deg);
}
.svg-darkgreen {
    filter: invert(0.35) sepia(1) saturate(5) hue-rotate(45deg);
}
.svg-lightblue {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(160deg);
}
.svg-purple {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(220deg);
}
.svg-pink {
    filter: invert(0.5) sepia(1) saturate(6) hue-rotate(250deg);
}
.svg-red {
    filter: invert(0.35) sepia(1) saturate(8) hue-rotate(310deg);
}

/* PULSATING MARKER*/
.marker {
    width: 100px;
    height: 100px;
    position: absolute;
    /*top: 130px;*/ /*positions our marker*/
    /*left: 200px;*/ /*positions our marker*/
    display: block;
}
.pinblue {
    width: 20px;
    height: 20px;
    position: relative;
    top: 40px;
    left: 40px;
    background: rgba(5, 124, 255, 1);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 1000;
}

.pinblue-effect {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    display: block;
    background: rgba(5, 124, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2400ms ease-out infinite;
}


.pinlightgreen {
    width: 20px;
    height: 20px;
    position: relative;
    top: 40px;
    left: 40px;
    background: rgba(55, 255, 5, 1);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 1000;
}

.pinlightgreen-effect {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    display: block;
    background: rgba(55, 255, 5, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2400ms ease-out infinite;
}

.pindarkgreen {
    width: 20px;
    height: 20px;
    position: relative;
    top: 40px;
    left: 40px;
    background: rgba(0, 100, 10, 1);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 1000;
}

.pindarkgreen-effect {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    display: block;
    background: rgba(0, 100, 10, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2400ms ease-out infinite;
}
.pinred {
    width: 20px;
    height: 20px;
    position: relative;
    top: 40px;
    left: 40px;
    background: rgba(222, 13, 13, 1);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 1000;
}

.pinred-effect {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    display: block;
    background: rgba(222, 13, 13, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2400ms ease-out infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}
/* END PULSATING MARKER*/




.gps_ring {
    border: 3px solid;
    border-color: #ff0000;
    -webkit-border-radius: 30px;
    height: 36px;
    width: 36px;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    /*opacity: 0.0*/
}

/* Css3 tags */
.tags a {
    display: inline-block;
    height: 48px;
    line-height: 23px;
    position: relative;
    margin: 0 12px 8px 0;
    padding: 0 12px 0 10px;
    background: #777;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    color: #fff;
    /*font-size:12px;*/
    /*font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;*/
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /*font-weight: bold;*/
}

.tags a:before {
    content: "";
    position: absolute;
    top: 20px;
    right: 1px;
    float: left;
    width: 5px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -moz-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
    box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
}

.tags a:after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #777;
    border-style: solid;
    border-width: 24px 0 24px 12px;
}

.tags a.color1 {
    background: #f58220;
}

.tags a.color1:after {
    border-color: transparent transparent transparent #f58220
}

.tags a.color2 {
    background: #97c224;
}

.tags a.color2:after {
    border-color: transparent transparent transparent #97c224
}

.tags a.color3 {
    background: #de3f3e;
}

.tags a.color3:after {
    border-color: transparent transparent transparent #de3f3e
}

.tags a.color4 {
    background: #ec008c;
}

.tags a.color4:after {
    border-color: transparent transparent transparent #ec008c
}

.tags a.color5 {
    background: #00a6df;
}

.tags a.color5:after {
    border-color: transparent transparent transparent #00a6df
}

.tags a:hover {
    background: #222 !important
}

.tags a:hover:after {
    border-color: transparent transparent transparent #222 !important
}

/***********************************************
	leaflet-control-topcenter.scss, 
	(c) 2016, FCOO
	https://github.com/FCOO/leaflet-control-topcenter
	https://github.com/FCOO
************************************************/
/* control positioning */
.leaflet-center {
    position: relative !important;
    left: 0;
    right: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .leaflet-center .leaflet-control {
        bottom: 0;
    }

.leaflet-control-container .leaflet-control-bottomcenter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
