html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* General Text */
h1:focus {
    outline: none;
}

a, .btn-link {
    color: #8A3A2B; /* Dusty Red */
}

/* Buttons */
.btn-primary {
    color: #4A4A4A; /* Charcoal Gray */
    background-color: #D97642; /* Burnt Orange */
    border-color: #E5B73B; /* Mustard Yellow */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #8A3A2B, 0 0 0 0.25rem #E5B73B; /* Dusty Red and Mustard Yellow */
}

/* Content Spacing */
.content {
    padding-top: 1.1rem;
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Error UI */
#blazor-error-ui {
    background: #F5E5C0; /* Creamy Beige */
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

/* Loading Spinner */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Code Highlight */
code {
    color: #c02d76;
}

/* Bootstrap Overrides */
.primaryColor {
    color: #F5E5C0; /* Creamy Beige */
}

.primaryBackground {
    background-color: #F5E5C0; /* Creamy Beige */
}

.secondaryColor {
    background-color: #2E5A5A; /* Deep Teal */
}

.main {
    color: #4A4A4A; /* Charcoal Gray */
}

.footer {
    color: #4A4A4A;
}

.hero-text {
    color: #F5E5C0;
}

/* Parallax Effect for About Section with Solid Color Background */
.parallax {
    background-image: url('https://garnavillominimart.blob.core.windows.net/homepage/gmmOutside.jpg'); /* Use any background image URL here */
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #4A4A4A; /* Charcoal Gray for readability */
}

    .parallax .container {
        background: rgba(255, 255, 255, 0.8); /* Slightly transparent background for text readability */
        padding: 3rem;
        border-radius: 8px;
    }

.hero-text {
    color: #4A4A4A; /* Charcoal Gray */
}

.carousel-inner {
    min-height: 300px; /* Set a fixed height for the carousel container */
}

.carousel-img {
    height: 100%; /* Make the image fill the container's height */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image is fully visible without cropping */
}

.eventText {
    color: white;
    text-align: center;
    -webkit-text-stroke: 0.09rem black;
    paint-order: stroke fill;
    font-weight: 800;

}

.event-description-container {
    color: black;
    display: inline-grid;
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    max-width: 100%;
    overflow: hidden; /* Prevents overflow from showing outside the rounded corners */
}

 Inner scrollable content 
.event-description {
    max-height: 200px; /* Set a max-height for the text */
    overflow-y: scroll; /* Enable vertical scrolling */
    padding: 10px; /* Add some padding for better spacing */ 
}

     Scrollbar styles for WebKit browsers 
    .event-description::-webkit-scrollbar {
        width: 12px;  /*Width of the scrollbar*/ 
    }

    .event-description::-webkit-scrollbar-track {
        background: #f1f1f1;  /*Background of the scrollbar track*/ 
        border-radius: 20px;  /*Optional: match border radius*/ 
    }

    .event-description::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 20px; /* Optional: match border radius */
    }

        .event-description::-webkit-scrollbar-thumb:hover {
            background: #555;  /*Color when hovering over the scrollbar thumb*/ 
        }

/* Scrollbar styles for Firefox */
.event-description {
    scrollbar-width: thin; /* Options: auto, thin */
    scrollbar-color: #888 #f1f1f1; /*thumb color and track color*/
}

/* Optional: Add some styling for the border */
.event-description-container {
    border-color: #F5E5C0; /* Set your border color */
}

/* Optional: Add a background color to differentiate */
.event-description {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background */
}

.event-background {
    background-color: #2E5A5A;
}

.scrollable-container {
    max-height: 850px; /* Limit the maximum height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 2px solid #ccc; /* Optional: Add a border for clarity */
    padding: 10px; /* Optional: Add padding for better appearance */
    background-color: #f9f9f9; /* Optional: Light background color */
    border-radius: 5px;
}

.widget {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #ffffff;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .header .profile-pic {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .header .name {
        font-weight: bold;
    }

.message {
    margin-bottom: 10px;
    font-size: 14px;
}

.post-image-full {
    display: block;
    width: 100%; /* Full width of the card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0; /* Remove rounding */
    margin-top: 10px; /* Add some spacing */
}

.timestamp {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
}

.waffle-background {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2E5A5A;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.alignCenterParent {
    color: #333;
    font-family: Arial, sans-serif;
    text-align: center;
}

.promoText {
    font-size: 1.5rem;
    margin: 0;
}

.map-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    width: 100%; /* Full width by default for mobile */
    margin: 0 auto; /* Center the map */
}

    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Adjust map size for larger screens */
@media (min-width: 1024px) {
    .map-container {
        width: 50%; /* Reduce width to half on desktops */
        height: 50%;
    }
}