/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
}
body {
    overflow: hidden;
    --mdui-color-primary: #4f378b;
}
.load-hidden {
    visibility: hidden !important;
    position: absolute !important;
}

/*  Help Dialog  */
#help-btn {
    position: absolute;
    top: 20px;
    right: 20px;;
    z-index: 200;
}
#help-dialog {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    padding: 20px;
}

/* Add Marker Dialog */
#add-address-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    background: #d57106;
    color: #fff;
}
#add-marker-dialog {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    padding: 20px;

    &::part(overlay) {
        display: none !important;
    }
}

#add-form-success {
    background: green;
    font-size: 4em;
}

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

#fait-par {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    box-shadow: var(--mdui-elevation-level2);

    img {
        width: 200px;
        border: 1px solid rgb(1, 156, 184);
    }
}

@media only screen and (max-width: 400px) {
    #fait-par {
        position: fixed;
        width: 100%;
        background-color: white;
        text-align: center;
        border-top: 1px solid rgb(1, 156, 184);

        img {
            max-width: 100%;
            border: none;
        }
    }
}