.location-main-container{
    display: flex;
    flex-direction: column;
    .location-search-div{
        display: flex;
        border: 1px solid #c8c8c8;
        border-radius: 3px;
        background-color: #f6f6f6;
        margin: 0 16px;
        .search-image{
            padding: 0 10px;
            height: 20px;
            align-self: center;
        }
        input{
            flex: 1;
            height: 30px;
            outline: none;
            border: none;
            font-size: 14px;
            background: #f6f6f6;
        }
        .my-location-div{
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-align: center;
            color: #1d7eef;
            align-self: center;
            display: flex;
            img{
                padding-right: 10px;
                vertical-align: middle;
                height: 20px;
            }
            div{
                display: none;
            }
        }
    }
    .vue-google-maps-div{
        display: flex;
        flex-direction: column;
        flex: 1;
        input{
            width: 80%;
        }
        .button-wrapper{
            padding: 10px 16px 32px;
        }
        .button-div{
            font-weight: 500;
            text-align: center;
            padding: 20px 0 17px;
            color: white;
            background-color: #9b9b9b;
            border-radius: 3px;
        }
        div.enabled{
            background-color: #70ad4d;
        }
    }
    .location-error-overlay{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.3);
        z-index: 1; 
    }
    .location-error-div{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 40px;
        background-color: white;
        padding: 40px;
        align-self: center;
        z-index: 2;
        border-radius: 3px;
        img{
            width: 178px;
        }
        .error-title{
            font-size: 16px;
            font-weight: 500;
            line-height: 1.75;
            color: #4a4a4a;
            justify-content: center;
            margin: 25px 0 10px;
        }
        .error-text{
            font-size: 12px;
            line-height: 1.5;
            text-align: center;
            color: rgba(0, 0, 0, 0.54);
        }
    }
}
.with-error{
    flex: 1;
}

@media screen and (min-width: 770px){
    .location-search-div{
        margin: 0 !important;
        .search-image{
            height: unset !important;
        }
        input{
            height: 50px !important;
            font-size: 16px !important;
        }
        .my-location-div{
            font-size: 16px !important;
            margin: 0 28px 0 0;
            div{
                display: flex !important;
            }
            img{
                height: unset !important;
            }
        }

    }
}