.btn-primary:hover {
    background-color: black;

}

.btn-primary {
    background-color: slategray;
    border-color: rgb(113, 144, 112);
}

.scrolling-buttons-wrapper {
    display: flex;
    /* --flex-wrap: nowrap!important; */
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 10px;
    /* scrollbar-width: thin; */

    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    transition: all 0.3s ease;

}

.scrolling-buttons-wrapper::-webkit-scrollbar {
    height: 6px;
    /* For WebKit browsers like Chrome */
    background: transparent;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.scrolling-buttons-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.scrolling-buttons-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #999 transparent;
    /* Firefox */
}

/* Chrome, Safari, Edge */
.scrolling-buttons-wrapper::-webkit-scrollbar {
    height: 6px;
}

.scrolling-buttons-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.scrolling-buttons-wrapper::-webkit-scrollbar-thumb {

    /* background-color: #888; */
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.scrolling-buttons-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.card-body {
    border-radius: 10px !important;
}

.scrolling-buttons-wrapper .btn[aria-expanded="true"] {
    background-color: #198754;
    /* Bootstrap green */
    color: white;
    border-color: #146c43;
}