/*
Custom Styling Esri Map and Widget
*/

.esri-view-root .esri-ui, .esri-ui-inner-container, .esri-ui .esri-popup--is-docked, .esri-popup__main-container {
    z-index: 1000;
}

.esri-features__heading {
    display: none !important;
}

.esri-widget {
    font-family: 'Atkinson Hyperlegible Next',sans-serif;
}

.esri-component.esri-popup,
.esri-popup__main-container {
    border-radius: 0.25rem;
}

.esri-popup__button,
.esri-popup__header-title,
.esri-popup__header-container--button {
    color: var(--theme-bg-highlight);
}

.esri-popup__button:hover,
.esri-popup__header-container--button:hover {
    background-color: #fff;
    color: var(--theme-bg-highlight-hover);
}

.main[data-columns="two"] .nbg-maengelmelder .map-container{
    height: 30rem;
}

.nbg-treemap {
    .map-status {
        align-items: center;
        bottom: 0;
        display: flex;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .map-container {
        border: 1px solid #B9B9B9;
        height: 40rem;
        margin: 1.5rem auto;
        overflow: hidden;
        position: relative;
        width: 100%;
        z-index: 9; /* muss hinter .wrapper--top-row mit z-index:10 liegen */
    }

    @media (max-width: 50em) {
        .map-container{
            max-height: 25rem;
        }
    }
}

#treemap-application-map {
    border: 1px solid #B9B9B9;
    height: 20rem;
    margin: 1.5rem auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 9;
}

.tooltip--map > :last-child {
    margin-bottom: 0;
}

.tooltip--map-metainfo {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}