#release-notes-container {
    padding: 32px 48px 88px 48px;
}

.release-notes-left {
    gap: 40px;
    max-width: 361px;
}

.release-notes-filter {
    gap: 0.75rem;
}

.release-notes-content {
    padding: 24px 32px 24px 32px;
    gap: 80px;
}

.btn-outline-primary {
    background-color: transparent;
    background-image: none;
    border-color: var(--bs-gray-400) !important;
}

.btn-outline-primary span {
    color: black !important;
}

.btn-outline-primary.active span {
    color: white !important;
    font-weight: 700 !important;
}

.btn-outline-primary:hover {
    background-color: var(--orange-500-color) !important;
    border-color: var(--orange-500-color) !important;
}

.btn-outline-primary:hover span {
    color: white !important;
}

.release-notes-filter-chip.active {
    background-color: var(--orange-500-color) !important;
    border-color: var(--orange-500-color) !important;
}

.release-notes-filter-chip.active span {
    color: white !important;
    font-weight: 700 !important;
}

.release-notes-filter-chip {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.release-notes {
    gap: 80px;
}

.release-note {
    gap: 40px;
    max-width: 720px;
}

.release-note-tag {
    padding: 11px 14px;
}

.release-note-content-container {
    gap: 40px;
}

#reset-filters-btn {
    cursor: pointer;
    width: fit-content;
}

/* Date Range Picker Wrapper Styles */
.date-range-wrapper {
    position: relative;
}

#start_date,
#end_date {
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

/* Remove hover and focus styles */
#start_date:hover,
#end_date:hover,
#start_date:focus,
#end_date:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Optional: Remove background color change on hover/focus */
#start_date:hover,
#end_date:hover,
#start_date:focus,
#end_date:focus {
    background-color: transparent;
}

#date-range-error {
    font-size: 0.875rem; /* Equivalent to Bootstrap's text-sm */
    color: #dc3545; /* Bootstrap's danger color */
    margin-top: 0.5rem;
}

.flatpickr-day.selected {
    background-color: var(--orange-500-color) !important;
    border-color: var(--orange-500-color) !important;
    color: white !important;
}

@media (max-width: 480px) {
    #release-notes-container {
        padding: 24px 24px 96px 24px;
    }

    h2.heading-5 {
        font-size: 24px !important;
        line-height: 29.26px !important;
    }

    .release-notes-left {
        max-width: 100% !important;
        gap: 32px;
    }

    .release-notes-filter-chips {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
    }

    .release-notes-filter-chips {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: flex;
    }

    .release-notes-filter-chips::-webkit-scrollbar {
        display: none;
    }

    #release-notes-filters-form {
        gap: 32px;
    }

    .release-notes-content {
        padding: 0;
        gap: 40px;
    }

    .release-note-subheader {
        gap: 10px;
    };

    .release-notes {
        gap: 48px;
    }

    .release-note {
        max-width: 100% !important;
        gap: 32px;
    }


    .release-notes-filters {
        max-width: 100% !important;
    }

    .flatpickr-input {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .flatpickr-input:hover,
    .flatpickr-input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

}