/*
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-maengelmelder{
    .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;
        }
    }

    .map-hint-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        color: #FFF;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 3rem;
    }

    .button--entry-similar {
        align-items: center;
    }

    .categorys{
        list-style: none;
        display: grid;
        gap: 1rem;
        grid-auto-rows: 1fr;
        padding: 0;
        button{
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            text-align: left;
            gap: 1.5rem;
            padding: 1rem;
            svg{
                min-width: 2rem;
            }
        }
    }
    .box--entry__content{
        gap: 0;
        gap: calc(0.5rem + 1vw);
        .box--entry__buttons{
            display: flex;
            flex-direction: column;
            gap: 1rem;
            button{
                text-align: left;
            }
        }
    }
    @container content-entry (min-inline-size: 42rem) {
        .box--entry__content{
            .box--entry__buttons{
                flex-direction: row;
            }
            .box--entry__content {
                gap: calc(0.5rem + 3vw);
            }
        }
    }
    @media only all and (min-width: 42rem) {
        .categorys{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}