.agenda-search {
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.1;
}

#searchInput {
    border: 2px solid #00679b;
    height: 40px;
}

#searchButton {
    background-color: #00679b;
    font-size: 16px;
    height: 40px;
}

#results {
    margin-top: 20px;
}

/* Add more custom styles as needed */

.highlight {
    display: inline;
    background-color: yellow; /* Example highlight */
}

.card {
    margin-bottom: 30px;
}

.card-title {
    color: #657bb7;
    font-size: 20px;
    font-weight: bold;
}

.card-text.text-medium-small {
    font-size: 16px;
}

.card-date-footer {
    color: #657bb7;
    font-size: 16px;
}

.speakerX {
    font-style: italic;
    font-size: 16px;
}

a {
    text-decoration: none;
}

.margin-left-custom {
    margin-left: 0.5rem; /* Or 1rem, or whatever space you need */
}

.margin-top-2 {
    margin-top: 5px; /* This emulates 'mb-3' in Bootstrap 4 which typically means 1rem (16px) */
}

.margin-bottom-2 {
    margin-bottom: 5px; /* This emulates 'mb-3' in Bootstrap 4 which typically means 1rem (16px) */
}
/*.margin-bottom-3 {
    margin-bottom: 10px; /* This emulates 'mb-3' in Bootstrap 4 which typically means 1rem (16px) */
}

.padding-3 {
    padding: 10px;
}

.header-with-spinner {
    display: flex;
    align-items: center; /* Ensures vertical center alignment */
    line-height: normal; /* Ensure the line height is normal for better control */
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid rgb(89, 112, 178); /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: none; /* Hidden by default */
    margin-left: 10px; /* Adds some space between the text and the spinner */
    margin-bottom: -8px; /* Adds some space between the text and the spinner */
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}