html,
body {
    height: 100%;
}

body {
    font-family: MunichAirportProRg;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

a {
    color: #000;
}

.mk-dark-mode a {
    color: #fff;
}

h1 {
    font-size: 14px;
}

h2 {
    font-size: 14px;
}

#map {
    width: 100%;
    height: 100%;
}

/*
 * The level picker control lets users choose the building level they want to see on map.
 * It appears on the top left corner of the map.
 */
#levelpicker {
    position: absolute;
    background: white;
    top: 40px;
    left: 10px;
    border-radius: 0px;
    padding: 5px 0;
    border: 1px solid #D5D5D5;
    display: none;

}

#levelpicker li {
    display: none;
    list-style: none;
    padding: 5px 10px;
    text-align: center;
    font-family: sans-serif;
    color: #8F8F8F;
    cursor: pointer;
}

#levelpicker li:not(:last-child) {
    border-bottom: 1px solid #D5D5D5;
}

#levelpicker li.selected {
    color: #fff;
    background-color: #252940;

}

.circle-annotation {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: #FFF;
    background-color: rgb(0, 0, 0);
    text-align: center;
    line-height: 11px;
    font-size: 12px;
}

.circle-annotation-hidden {
    display: none;
}

.circle-annotation-title {
    position: absolute;
    top: 20px;
    left: -44px;
    width: 100px;
    color: #252940;
    font-size: 10px;
}

.service-annotation {
    color: #252940;
    background-color: rgb(0, 0, 0);
}

.service-annotation {
    background-color: transparent;
    background-image: url("assets/services.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 0%;
}

.service-annotation .circle-annotation-title {
    color: #000;
}

.restaurant-annotation {
    background-color: transparent;
    background-image: url("assets/food.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.restaurant-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.stairs-annotation {
    background-color: transparent;
    background-image: url("assets/stairs.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.elevator-annotation {
    background-color: transparent;
    background-image: url("assets/elevator.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.atm-annotation {
    background-color: transparent;
    background-image: url("assets/atm.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.childcare-annotation {
    background-color: transparent;
    background-image: url("assets/stroller.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 18px;
    height: 18px;
    border-radius: 0%;
    top: -10px;
}


.postoffice-annotation {
    background-color: transparent;
    background-image: url("assets/mail.png");
    background-size: cover;
    background-color: transparent;
    width: 18px;
    height: 18px;
}

.traintrack-annotation {
    background-color: transparent;
    background-image: url("assets/sbahn.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.ticketing-annotation {
    background-color: transparent;
    background-image: url("assets/ticket.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}


.defibrillator-annotation {
    background-color: transparent;
    background-image: url("assets/defi.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 18px;
    height: 18px;
    border-radius: 0%;
    top: 0px;
}

.smokingarea-annotation {
    background-color: transparent;
    background-image: url("assets/smoker.png");
    background-size: cover;
    background-color: transparent;
    width: 30px;
    height: 30px;
}
.recreation-annotation {
    background-color: transparent;
    background-image: url("assets/lounge.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.recreation-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.massagetherapist-annotation {
    background-color: transparent;
    background-image: url("assets/lounge.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.massagetherapist-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}


.airportloungebar-annotation {
    background-color: transparent;
    background-image: url("assets/lounge.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.airportloungebar-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.haircutsstyling-annotation {
    background-color: transparent;
    background-image: url("assets/lounge.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.haircutsstyling-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.shopping-annotation {
    background-color: transparent;
    background-image: url("assets/shopping.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.shopping-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.healthcarecenter-annotation {
    background-color: transparent;
    background-image: url("assets/medical.png");
    background-size: cover;
    background-color: transparent;
    width: 24px;
    height: 24px;
}

.healthcarecenter-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.information-annotation {
    background-color: transparent;
    background-image: url("assets/information.png");
    background-size: contain;
    width: 20px;
    height: 20px;
    border-radius: 0%;
}

.playground-annotation {
    background-color: transparent;
    background-image: url("assets/playground.png");
    background-size: contain;
    width: 24px;
    height: 24px;
    border-radius: 0%;
}

.playground-annotation .circle-annotation-title {
    left: -34px;
    top: 25px;
    color: #000;
}

.currencyexchange-annotation,.taxservices-annotation  {
    background-color: transparent;
    background-image: url("assets/exchange.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    border-radius: 0%;
}

.currencyexchange-annotation, .taxservices-annotation .circle-annotation-title {
    left: -34px;
    top: 20px;
    color: #000;
}

.travelservices-annotation {
    background-color: transparent;
    background-image: url("assets/services.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 0%;
}

.travelservices-annotation .circle-annotation-title {
    left: -34px;
    top: 15px;
    color: #000;
}

.professional\.personalassistants-annotation {
    background-color: transparent;
    background-image: url("assets/services.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 0%;
}

.professional\.personalassistants-annotation .circle-annotation-title {
    left: -34px;
    top: 15px;
    color: #000;
}

.auto\.dealer\.car-annotation {
    background-color: transparent;
    background-image: url("assets/services.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border-radius: 0%;
}

.auto\.dealer\.car-annotation .circle-annotation-title {
    left: -34px;
    top: 15px;
    color: #000;
}


.restroom-annotation {
    background-color: transparent;
    background-image: url("assets/restroom.png");
    background-size: contain;
    width: 24px;
    height: 24px;
}

.checkin\.desk-annotation {
    background-color: transparent;
    background-image: url("assets/checkin.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    border-radius: 0%;
}

.checkin-annotation {
    background-color: transparent;
    background-image: url("assets/checkin.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    border-radius: 0%;
}

.boardinggate\.aircraft-annotation {
    background-color: transparent;
    /*   background-image: url("assets/gate.png");
    background-size: contain;
    background-repeat: no-repeat;
  */
    width: 24px;
    height: 24px;
    border-radius: 0%;
}

.boardinggate\.aircraft-annotation .circle-annotation-title {
    left: -38px;
    top: 15px;
    font-size: 10px;
}

.immigration-annotation {
    background-color: transparent;
    background-image: url("assets/immigration.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    border-radius: 0%;
}


.baggagecarousel-annotation {
    background-color: transparent;
    background-image: url("assets/baggage.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 19px;
    height: 19px;
    border-radius: 0%;
}

.prayerroom-annotation {
    background-color: transparent;
    background-image: url("assets/prayerroom.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    border-radius: 0%;
}

.prayerroom-annotation .circle-annotation-title {
    left: -38px;
    top: 25px;
    color: #000;
}

.restroom\.wheelchair-annotation {
    background-color: transparent;
    background-image: url("assets/restroom_wheelchair.png");
    background-size: contain;
    width: 24px;
    height: 24px;
}

.security\.checkpoint-annotation {
    background-color: transparent;
    background-image: url("assets/security.png");
    background-size: contain;
    width: 36px;
    height: 36px;
}

.health-annotation {
    background-color: rgb(43, 255, 0);
}

.occupant-callout {
    margin-bottom: 1px;
    margin-left: 1px;
    width: 200px;
    height: 200px;
    background-color: lightgray;
    color: #252940;
    position: fixed;
    bottom: 0;
}


@font-face {
    font-family: MunichAirportProRg;
    src: local("MunichAirportProRg"), url(assets/MunichAirport-Rg.woff) format("woff"), url(assets/MunichAirport-Rg.ttf) format("truetype");
    font-display: swap
}

.mapSearchWrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 0;
    z-index: 100;
    width: 200px;
}

.mapSearchInput {
    display: block;
    width: 100%;
    padding: 4px;
    border: 1px solid #D5D5D5;
    border-radius: 0px;
}

.mapSearchResults {
    display: none;
    width: 100%;
    position: absolute;
    top: 34px;
    left: 0px;
    z-index: 9999;
    background: #FFFFFF;
    border: 1px #CCCCCC solid;
    font-family: sans-serif;
    border-radius: 0px;
}

.mapSearchResultsItem {
    padding: 8px;
    border-bottom: 1px #CCCCCC solid;
}

.mapSearchResultsItem:hover {
    background: #EEEEEE;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #222222;
    opacity: 0.5;
    z-index: 1000;
}

/* Loaded */
.loaded #loader-wrapper {
    transition: opacity 0.4s linear 2s;
}

.loaded #loader-wrapper {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.no-js #loader-wrapper {
    display: none;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}