.dbq-document-element-map {

    .dbqdem-marker-info {
        float: left;
        background: $classlist-background;
    }

    .dbqdem-location-image {
        float: left;
        margin-right:10px;

        img {
            width: 100px;
            float: left;
            border-radius: 5px;
        }
    }

    .dbqdem-location-info {
        float: right;
    }

    .dbqdem-locations-container {
        position: absolute;
        width: 20%;
        height: calc(100% - 66px);
        min-width: fit-content;
        top: 58px;
        left: 10px;
        bottom: $padding-default;
        overflow-y: auto;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-radius: $border-radius-default;
        background: $classlist-background;
        background-color: $classlist-background;
        box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
        -webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
        -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
        @include scrollbar;

        .dbqdem-location {
            display: flex;
            width: 100%;
            padding: ($padding-default / 2) $padding-default;
            border-bottom: 1px solid #ddd;
            cursor: pointer;

            &:last-of-type {
                border-bottom: 0 none;
            }

            // &:hover {
            //     background: $color-primary;
            //     color: $color-white;
            // }

            .dbqdem-location-image {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
    
                img {
                    width: unset;
                    float: none;
                    border-radius: unset;
                }
            }

            .dbqdem-location-info {
                
            }
        }
    }
    
    // Info window styling
    .gm-style {
        .gm-style-iw-c,
        .gm-style-iw-d {
            background: $classlist-background;
            overflow: hidden !important;
            padding: 5px;
            // @include scrollbar;
        }

        .gm-style-iw-chr {
            button {
                width: 36px !important;
                height: 36px !important;

                span {
                    height: 18px !important;
                    width: 18px !important;
                    margin: 6px !important;
                }
            }
        }

        .gm-style-iw-tc {
            &::after {
                background: $classlist-background;
            }
        }

        // These are the buttons in the top-left to switch between Map and Satellite
        .gm-style-mtc {
            button {
                background: $classlist-background !important;
                color: $text-color-default !important;
            }
        }

        // These are the buttons in the bottom-right to increase/decrease the zoom level
        .gmnoprint {
            button {
                background: $classlist-background !important;
                color: $text-color-default !important;
            }
        }

        // This is the close button in the info window of a marker
        .gm-ui-hover-effect {
            outline: 0;

            // This is the x icon
            span {
                background: $text-color-default;
            }
        }
    }
}