.container {
    display: flex;
    flex-direction: row;
    border: 1px solid #cbd5e0;
    height: calc(100% - 65px);
    width: 100%;
    position: absolute;
    top: 65px;
    bottom: 0px;
}

.container__left {
    /* Initially, the left takes 3/4 width */
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.resizer {
    display: none;
    background-color: black;
    cursor: ew-resize;
    height: 100%;
    width: 4px;
}

.grabber {
    box-sizing: border-box;
    width: 16px;
    height: 39px;
    top: 50%;
    left: unset;
    padding-top: 10px;
    padding-left: unset;
    position: relative;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 10000;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    border-radius: 6px;
    display: block;
    right: 0;
    overflow: hidden;
    cursor: grab;
}

.grabber-inner {
    background-image: url(https://fonts.gstatic.com/s/i/googlematerialicons/drag_handle/v14/grey600-18dp/1x/gm_drag_handle_grey600_18dp.png);
    background-position: 0 0;
    background-size: cover;
    height: 17px;
    width: 17px;
    cursor: grab;
    transform: rotate(90deg);
}

.container__right {
    display: none;
    /*display: flex;*/
    flex: 1;
    align-items: center;
    justify-content: center;
}

.streetview-hint{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;
}

.state-indicator:before {
    content: "desktop";
}

@media (max-aspect-ratio: 1) {
    .container {
        flex-direction: column;
    }

    .container__left {
        /* Initially, the left takes 3/4 width */
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .resizer {
        display: none;
        background-color: black;
        cursor: ns-resize;
        height: unset;
        width: 100%;
        height: 4px;
    }

    .grabber {
        width: 39px;
        height: 16px;
        top: unset;
        left: 50%;
        padding-top: unset;
        padding-left: 10px;
    }

    .grabber-inner {
        transform: unset;
    }

    .state-indicator:before {
        content: 'mobile';
    }

}


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