body {
    height: 100vh;
}

/* THUMBS UP ICON */
.thumb-icon {
    position: absolute;
    bottom: 70px;
    right: 10px;
    font-size: 24px; /* Adjust size as needed */
    color: white; /* Keep it black */
    z-index: 2; /* Above image, but below badges */
    cursor: pointer; /* Indicate that the icon is clickable */
}

/* If the thumb is clicked/active (for future functionality) */
.thumb-icon.active {
    color: #ffb900; /* Gold color */
}

/* Transition to 'full screen' */
.fade-out {
    opacity: 0;
    pointer-events: none; /* This ensures that the element cannot be clicked on or interacted with */
    transition: opacity 0.5s;
}

.translate-to-top-left {
    transform: translate(
        0,
        0
    ); /* You might need to adjust the translation values */
    z-index: 5; /* Ensures this card is above others */
    position: relative;
    transition: transform 0.5s;
}
/* Styles for the details view */

.card-selected .details-view {
    display: block;
}

.col {
    transition: opacity 0.5s ease-out; /* This line provides the fading effect */
}
.viewColumn + .details-view {
    display: block;
}

.grey-out {
    color: #aaa; /* Adjust the color as needed */
    pointer-events: none; /* Ensures the label is not clickable */
}

@media screen and (min-width: 1400px) {
    .col-xxl-one-fifth {
        flex: 0 0 auto;
        width: 20%;
    }
    #gridAndMapContainer {
        height: calc(100vh - 200px);
    }
}

#gridContainer a:hover {
    color: unset;
    text-decoration: none;
}

a.col {
    text-decoration: none;
    color: inherit;
}
@media screen and (max-width: 1200px) and (min-width: 768px) {
    #cafeModal .modal-dialog {
        width: 100%;
        max-width: calc(100vw - 100px);
    }
}

.info-window__directions button:hover,
.info-window__directions button:focus,
.info-window__directions button {
    background-color: unset;
    color: unset;
}

/* CAFE SUGGESTIONS */
.cafe-card {
    border: 1px solid #000;
    margin-bottom: 1rem;
}

.vote-button {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #000;
    transition: color 0.2s;
}

#cafe-suggestions {
    max-width: 600px;
    margin: 0 auto;
}

#cafe-suggestions .btn,
#cafe-suggestions .card {
    border-radius: 0;
}

.vote-button:hover {
    color: #555;
}

.vote-count {
    font-size: 1.1rem;
    font-weight: bold;
}

#new-cafe-suggestion input {
    margin-bottom: 0.5rem;
}

#new-cafe-suggestion button {
    width: 100%;
}