.custom-button-slider-wrapper
{
    overflow: hidden;
    position: relative;
}

.custom-button-slider-nav-prev,
.custom-button-slider-nav-next
 {

    width: 40px;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    z-index: 10;
    background-image: linear-gradient(to right, #ffffffd9, #ffffff00);
}

.custom-button-slider-nav-next.active
{
background-image: linear-gradient(to right, #ffffff00, #ffffffd9);
}


.custom-button-slider-nav-prev.active:before
{
     content: '';
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://testsite.radiuselnet.dk/wp-content/uploads/Large-chevron.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    -ms-filter: "The rule you get from the website" -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


.custom-button-slider-nav-next.active:before
{
    content: '';
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://testsite.radiuselnet.dk/wp-content/uploads/Large-chevron.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}



.custom-button-slider-nav-prev
{
  left: 0px;
}

.custom-button-slider-nav-next
{
    right: 0px;
}


.custom-button-slider-nav-prev.active
{
  display: flex;
}

.custom-button-slider-nav-next.active
{
     display: flex;
}


.custom-button-slider {
    display: flex;
    gap: 10px;
    display: flex;
    overflow-x: auto; 
    scroll-behavior: smooth; 
    white-space: nowrap
    -webkit-overflow-scrolling: touch;
}



.custom-button-slider::-webkit-scrollbar {
    display: none;  
}


.custom-button-slider {
    scrollbar-width: none; 
}

.custom-button-slider .custom-button-slider-item .custom-button {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    background-color: #fff;
    color: #4d637c;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
    text-wrap: nowrap;
}


.custom-button-slider-item.active .custom-button
{
    /*background-color: red;*/
}

.custom-button-slider .custom-button-slider-item .custom-button.sel
{
    background-color: #002044;
    color: var(--e-global-color-41df53a);
}


.custom-button-slider .custom-button-slider-item .custom-button:hover {
        background-color: #002044;
        color: var(--e-global-color-41df53a);
}