/* Map and image container styles */
.map-container {
    height: 90vh;
}

.image-container {
    z-index: 9999;
    background-color: rgb(0, 0, 0);
    position: absolute !important;
    bottom: 59px;
    max-width: 400px;
    width: 90%;
    height: 35%;
    max-height: 200px;
    right: 21px;
}

/* Header styles */
.header {
    background: #f8f9fa;
}

/* Search container styles */
.search-container {
    background: #f8f9fa;
    padding: 10px;
}

/* Search input styles */
.search-container input {
    border-radius: 50px;
    padding: 10px;
    padding-left: 20px;
    height: 40px;
}

/* Search button styles */
.search-btn {
    width: 100px;
    padding: 4px;
    margin: 4px;
    margin-left: -104px;
    height: 33px;
}

/* Copy button styles */
.copy-btn {
    width: 50px;
    padding: 4px;
    margin: 4px;
    margin-left: -56px;
    height: 33px;
    font-size: 10px;
    border-radius: 0px 18px 18px 0px !important;
}

/* Open button styles */
.open-btn {
    width: 50px;
    padding: 4px;
    margin: 4px;
    margin-left: -106px;
    margin-right: 58px;
    height: 33px;
    font-size: 10px;
    border-radius: 18px 0px 0px 18px !important;
}

/* Share container styles */
.share-container {
    z-index: 9999;
    position: absolute !important;
    bottom: 38px;
    max-width: 700px;
    width: 90%;
    height: 50px;
    max-height: 400px;
    right: 30px;
    display: none;
}

/* Share input styles */
.share-container input {
    width: calc(100% - 150px);
    display: inline !important;
}

/* Share button styles */
.share-btn {
    width: 95px;
    height: 38px;
}

/* Direction button styles */
.direction-btn {
    min-width: 90px;
    padding: 4px;
    margin: 4px;
    height: 35px;
}

/* Search list styles */
.search-list {
    background: #f8f9fa;
    overflow-y: scroll;
    padding-top: 10px;
    display: none;
}

/* Search list item styles */
.search-list>ul>li {
    min-height: 35px;
    border-bottom: 1px solid #dbdbdb;
    text-align: left;
    font-size: 15px;
    padding: 5px;
    padding-left: 20px;
    color: #8f8f8f;
    margin-top: 5px;
}

/* Hover effect on search list item */
.search-list>ul>li:hover {
    border-bottom: 6px solid;
    cursor: pointer;
}

/* Search header styles */
.search-header {
    text-align: left;
    padding: 10px;
    color: #a5a5a5;
}

/* Search close styles */
.search-close {
    text-align: left;
    padding: 10px;
    color: #4c04be;
    cursor: pointer;
}

/* Panorama toggle styles */
.panaroma-toggle {
    border-radius: 50px;
    width: 180px;
    align-items: center;
    text-align: center;
    padding-left: 30px;
    height: 40px;
}

/* Panorama input styles */
.panaroma-toggle>input {
    width: 20px;
    height: 20px;
}

/* Panorama label styles */
.panaroma-toggle>label {
    margin-right: 10px;
}

/* Current coordinates styles */
.curr-coord {
    background-color: white;
    width: 300px;
    font-size: 12px;
    position: absolute;
    bottom: 8px;
    z-index: 999999;
    text-align: center;
    align-items: center;
    left: calc(50% - 150px);
    padding: 3px 0px;
    color: grey;
    border-radius: 10px;
}

/* Responsive styles for devices with screen width of 574px or smaller */
@media (max-width: 574px) {
    /* .map-container {
        height: 33vh;
    } */

    .search-list {
        z-index: 1;
        max-height: 120px;
    }

    /* .image-container {
        height: 28%;
        right: 10px;
        width: calc(100% - 20px);
    } */
}

/* Responsive styles for devices with screen width of 768px or smaller */
@media (max-width: 768px) {
    /* .map-container {
        height: 36vh;
    } */

    .search-list {
        z-index: 1;
        max-height: 120px;
    }
}

/* Responsive styles for devices with screen width of 768px or larger */
@media (min-width: 768px) {
    .search-list {
        width: 500px;
        max-height: 70%;
        position: absolute;
        top: 68px;
        left: 23px;
        border-radius: 15px;
        box-shadow: #c7c7c7 3px 3px 8px -5px;
        z-index: 99999;
    }
}