#map-container {
    display: flex;
    width: 100%;
    height: 100%; 
}

#map-area {
    flex-grow: 1; 
    position: relative;
}

#mapid {
    height: 100%; 
}

.full-height {
    display: flex;
    flex-direction: column; 
    height: 100vh; 
}

.row {
    display: flex;
    flex: 1; 
}

.remove-col-padding {
    padding-right: 0px;
    padding-left: 0px;
}

.move-forward {
    z-index: 9999;
}

.position-search {
    position: relative;
    top: 55px;
    left: 54px;
    width: 55%;
}

.position-search-button {
    position: relative;
    top: 55px;
    left: 59px;
}

.dark-mode {
    background-color: #454d55 !important;
    color: #fff;
}

.shadowed-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.glow-text {
    color: #fff;
    text-shadow: 1px 1px 2px #fff, 1px 1px 5px #ccc;
}

.logo-image {
    height: 95px;
    width: auto;
    padding-bottom: 12px;
}

.response-border {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px;
    height: 450px;
    margin-bottom: 10px;
    overflow: auto;
    color:white;
}

hr {
    border: none;
    border-top: 1px solid gray; /* Gray color */
    margin: 1em 0; /* Adjust margin as needed */
}

.center-on-map {
    right: calc(33vw - 50%);
    top: 12vh;
}

.transparent-mode {
    background-color: transparent;
    color: white;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

    .transparent-mode:focus {
        background-color: transparent;
        color: white;
        border-color: white;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }

/*.form-control:focus {
            background-color: transparent;
            color: white;
            border-color: white;
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }*/

.close {
    color: white;
}

    .close:hover {
        color: white;
    }

.darken-transparency {
    background-color: rgba(0, 0, 0, 0.3);
}

.clickable-questions {
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    padding: 5px;
    border-radius: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: inline-block;
}

    .clickable-questions:hover {
        background-color: white;
        color: black !important;
    }

    .clickable-questions:hover {
        text-decoration: none;
    }

#questionInput::placeholder {
    color: white;
}

#mapThumbnailContainer{
    border: 5px solid red;
}

.big-spinner {
    width: 7rem;
    height: 7rem;
}

.overlay {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

textarea {
    cursor: auto;
}

.timestamp {
    font-size: 0.7em; /* Small font size */
    color: #707070; /* Optional: slightly muted color */
    margin-left: 10px; /* Optional: space before timestamp */
    vertical-align: super; /* Optional: align slightly above baseline */
}

#searchBox.form-control {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: white; /* White text */
    border: 1px solid #fff; /* White border */
}

    #searchBox.form-control::placeholder {
        color: #ccc; /* Lighter color for placeholder text */
    }

    #searchBox.form-control:focus {
        background-color: rgba(255, 255, 255, 0.8) !important; /* Lighter background on focus */
        color: black !important; /* Black text */
        border-color: white !important; /* White border */
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important; /* Custom glow */
    }

#userInstruction {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

#searchButton {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: white; /* White text */
    border: 1px solid #fff; /* White border */
}

    #searchButton:hover {
        background-color: rgba(255, 255, 255, 0.8); /* Lighter background on hover */
        color: black; /* Black text for contrast */
        border-color: #fff; /* Maintain white border */
    }

    #searchButton:focus {
        background-color: rgba(0, 0, 0, 0.7); /* Slightly darker on focus */
        color: white;
        border-color: white;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); /* Adjust focus glow as needed */
    }

.nav-link {
    color: white
}

    .nav-link:hover {
        color: gainsboro;
    }

.nav-tabs .nav-item {
    margin-bottom: 0px !important;
}

.transparent-box {
    background-color: transparent;
    outline-style: solid;
    outline-width: thin;
}

.info-box-text {
    white-space: normal !important;
}


.toolbar-custom {
    border-color: gray !important;
}

.narrow-top-margin {
    margin-top: -5px;
}

input[type="file"] {
    opacity: 0.5; /* Adjust transparency */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 5px; /* Rounded corners */
    border: 1px solid #ccc; /* Grey border */
    padding: 5px; /* Some padding */
    cursor: pointer; /* Change cursor to pointer on hover */
}

input[type="file"]:hover {
    opacity: 0.7; /* Slightly less transparent on hover */
}

#coordinates-display {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  color: black; /* Black text for contrast */
  border-color: #fff; /* Maintain white border */
  padding: 5px;
  font-size: 12px;
  text-align: center;
  border-radius: 5px;
  z-index: 1000;
}